/*
Theme Name: BITARD
Theme URI: https://bitard.org
Author: Studio Bitard
Description: Custom WordPress theme for BITARD — architecture, visualization and interior design.
Version: 0.2.8
Text Domain: bitard
*/

:root{
  --edge:30px;
  --logo-col:122px;
  --logo-nav-gap:72px;
  --nav-col:270px;
  --air:118px;
  --content-right:12px;
  --gutter:8px;
  --paper:#f5f5f2;
  --ink:#141414;
  --muted:#8b8b86;
  --ease:cubic-bezier(.22,.75,.18,1);
}

html{box-sizing:border-box;background:var(--paper);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:13px;
  line-height:1.28;
  overflow-x:hidden;
}
img{max-width:100%}
button,a{font:inherit;color:inherit}

.bitard-shell{min-height:100vh}

.bitard-logo{
  position:fixed;
  z-index:100;
  top:var(--edge);
  left:var(--edge);
  width:var(--logo-col);
}
.bitard-logo img,
.bitard-logo .custom-logo{
  display:block;
  width:92px;
  max-width:92px;
  height:auto;
  object-fit:contain;
  object-position:left top;
}
.bitard-logo .custom-logo-link{display:block;width:max-content}

.bitard-rail{
  position:fixed;
  z-index:90;
  top:var(--edge);
  left:calc(var(--edge) + var(--logo-col) + var(--logo-nav-gap));
  width:var(--nav-col);
  height:calc(100vh - var(--edge)*2);
  display:flex;
  flex-direction:column;
  pointer-events:none;
}
.bitard-rail>*{pointer-events:auto}

.bitard-work-title{
  appearance:none;
  border:0;
  background:none;
  padding:0;
  margin:0 0 15px;
  text-align:left;
  font-size:19px;
  font-weight:600;
  cursor:pointer;
  width:max-content;
  letter-spacing:.01em;
}
.bitard-work-title::after{
  content:"";
  display:block;
  width:0;
  height:1px;
  margin-top:4px;
  background:var(--ink);
  transition:width .3s var(--ease);
}
.bitard-work-title:hover::after,
.bitard-work-title.is-active::after{width:100%}

.bitard-filters{display:flex;flex-direction:column;gap:6px;margin-bottom:34px}
.bitard-filter{
  appearance:none;
  border:0;
  background:none;
  padding:0;
  display:flex;
  align-items:baseline;
  gap:9px;
  width:max-content;
  max-width:none;
  white-space:nowrap;
  text-align:left;
  cursor:pointer;
  text-transform:uppercase;
  transition:opacity .22s ease,transform .35s var(--ease);
}
.bitard-filter span{width:20px;color:var(--muted);font-size:9px;flex:0 0 20px}
.bitard-filter:hover{transform:translateX(5px)}
.bitard-filters:hover .bitard-filter:not(:hover){opacity:.34}
.bitard-filter.is-active{font-weight:600}

.bitard-utility{display:flex;flex-direction:column;gap:13px;margin-top:7px}
.bitard-utility a{width:max-content;text-decoration:none;font-size:18px}
.bitard-utility a:hover{text-decoration:underline;text-underline-offset:4px}

.bitard-context{margin-top:auto;margin-bottom:76px;width:230px;min-height:132px}
.bitard-context__num{color:var(--muted);font-size:9px;margin-bottom:11px}
.bitard-context__title{font-size:16px;letter-spacing:.025em;margin-bottom:5px;text-transform:uppercase}
.bitard-context__cat{color:var(--muted);font-size:9px;text-transform:uppercase}
.bitard-context__meta{margin-top:17px;font-size:10px;line-height:1.55}
.bitard-rail-footer{position:absolute;left:0;bottom:0;display:flex;gap:36px;white-space:nowrap;font-size:9px}

.bitard-content{
  --content-left:calc(var(--edge) + var(--logo-col) + var(--logo-nav-gap) + var(--nav-col) + var(--air));
  margin-left:var(--content-left);
  width:calc(100% - var(--content-left) - var(--content-right));
  padding-top:var(--edge);
  padding-bottom:72px;
}

.bitard-showreel{
  height:min(54vh,570px);
  min-height:390px;
  position:relative;
  overflow:hidden;
  margin-bottom:var(--gutter);
  background:#111;
  opacity:1;
  transform-origin:50% 0;
  transition:height 1.18s cubic-bezier(.65,0,.35,1),opacity .62s ease .08s,margin 1.18s cubic-bezier(.65,0,.35,1),min-height 1.18s cubic-bezier(.65,0,.35,1);
  view-transition-name:showreel;
}
.bitard-showreel.is-hidden{height:0;min-height:0;opacity:0;margin-bottom:0;pointer-events:none}
.bitard-showreel img{display:block;width:100%;max-width:none;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.bitard-showreel:hover img{transform:scale(1.015)}
.bitard-showreel__shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.38),transparent 43%);pointer-events:none}
.bitard-showreel__label{position:absolute;z-index:2;left:20px;bottom:17px;color:#fff;font-size:10px;letter-spacing:.02em}
.bitard-showreel__label strong{font-size:14px;margin-right:8px}
.bitard-showreel__scroll{position:absolute;z-index:2;right:14px;bottom:17px;color:#fff;writing-mode:vertical-rl;font-size:9px;letter-spacing:.13em}

.bitard-gallery{column-count:2;column-gap:var(--gutter)}
.bitard-card{
  width:100%;
  display:inline-block;
  vertical-align:top;
  margin:0 0 var(--gutter);
  break-inside:avoid;
  position:relative;
  overflow:hidden;
  background:#ddd;
  cursor:pointer;
  opacity:1;
  transform:translateZ(0);
  transition:opacity .25s ease,filter .25s ease;
}
.bitard-card.is-hidden{display:none}
.bitard-card img{display:block;width:100%;max-width:none;height:100%;object-fit:cover;transition:transform .75s var(--ease),filter .35s ease}
.bitard-card:hover img{transform:scale(1.018)}
.bitard-card__shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.3),transparent 35%);opacity:.68;transition:opacity .25s ease;pointer-events:none}
.bitard-card:hover .bitard-card__shade{opacity:1}
.bitard-card[data-shape="tall"]{height:510px}
.bitard-card[data-shape="wide"]{height:300px}
.bitard-card[data-shape="medium"]{height:390px}
.bitard-card[data-shape="square"]{height:430px}
.bitard-card__label{position:absolute;z-index:3;left:13px;bottom:12px;color:#fff;opacity:1;transform:none;transition:opacity .25s ease,transform .35s var(--ease);font-size:9px;letter-spacing:.02em;text-transform:uppercase}
.bitard-card:hover .bitard-card__label{opacity:1;transform:translateY(-2px)}

body.bitard-filtering .bitard-card{transition:opacity .28s ease,filter .28s ease}

::view-transition-old(root),::view-transition-new(root){animation-duration:.62s;animation-timing-function:var(--ease)}
::view-transition-group(*){animation-duration:.62s;animation-timing-function:var(--ease)}
::view-transition-old(showreel){animation:bitardFadeOut .4s ease both}
::view-transition-new(showreel){animation:bitardFadeIn .45s ease both}
@keyframes bitardFadeOut{to{opacity:0}}
@keyframes bitardFadeIn{from{opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Compact desktop: preserve the left-rail composition without starving the work area. */
@media (max-width:1280px){
  :root{
    --edge:26px;
    --logo-col:92px;
    --logo-nav-gap:28px;
    --nav-col:228px;
    --air:34px;
    --content-right:10px;
  }
  .bitard-logo img,.bitard-logo .custom-logo{width:76px;max-width:76px}
  .bitard-showreel{height:min(49vh,500px);min-height:350px}
  .bitard-card[data-shape="tall"]{height:460px}
  .bitard-card[data-shape="wide"]{height:280px}
  .bitard-card[data-shape="medium"]{height:350px}
  .bitard-card[data-shape="square"]{height:390px}
}

/* Small desktop / landscape tablet: tighter rail and materially wider portfolio canvas. */
@media (max-width:1040px){
  :root{
    --edge:20px;
    --logo-col:78px;
    --logo-nav-gap:22px;
    --nav-col:220px;
    --air:22px;
    --content-right:8px;
  }
  .bitard-logo img,.bitard-logo .custom-logo{width:70px;max-width:70px}
  .bitard-work-title{font-size:18px}
  .bitard-filter{font-size:12px}
  .bitard-filter span{font-size:8px}
  .bitard-utility{gap:11px;margin-top:22px}
  .bitard-utility a{font-size:17px}
  .bitard-context{width:210px;margin-bottom:70px}
  .bitard-context__title{font-size:15px}
  .bitard-rail-footer{gap:28px;font-size:8px}
  .bitard-showreel{height:min(46vh,430px);min-height:320px}
  .bitard-card[data-shape="tall"]{height:420px}
  .bitard-card[data-shape="wide"]{height:250px}
  .bitard-card[data-shape="medium"]{height:320px}
  .bitard-card[data-shape="square"]{height:350px}
}

/* Tablet / compact portrait: the outer sticky chrome is owned by mobile.css. */
@media (max-width:820px){
  :root{--edge:18px}
  .bitard-logo img,.bitard-logo .custom-logo{width:70px;max-width:70px}
  .bitard-rail>div:first-child{
    display:grid;
    grid-template-columns:max-content max-content;
    grid-template-rows:auto auto;
    column-gap:20px;
    justify-content:start;
    align-items:start;
  }
  .bitard-work-title{
    grid-column:1;
    grid-row:1;
    font-size:17px;
    margin-bottom:10px;
  }
  .bitard-filters{
    grid-column:1;
    grid-row:2;
    gap:5px;
    margin:0;
  }
  .bitard-filter{font-size:11px}
  .bitard-filter span{font-size:8px}
  .bitard-utility{
    grid-column:2;
    grid-row:1 / span 2;
    margin:0;
    padding-left:20px;
    min-height:116px;
    gap:10px;
    border-left:1px solid rgba(20,20,20,.24);
  }
  .bitard-utility a{font-size:15px}
  .bitard-context,.bitard-rail-footer{display:none}
  .bitard-content{
    margin-left:var(--edge);
    width:calc(100% - var(--edge)*2);
    padding-top:0;
    padding-bottom:48px;
  }
  .bitard-showreel{height:min(48vh,400px);min-height:280px}
  .bitard-card[data-shape="tall"]{height:420px}
  .bitard-card[data-shape="wide"]{height:250px}
  .bitard-card[data-shape="medium"]{height:315px}
  .bitard-card[data-shape="square"]{height:350px}
}

/* Phones: preserve the same logo scale while tightening the surrounding spacing. */
@media (max-width:620px){
  :root{--edge:14px;--gutter:6px}
  .bitard-logo img,.bitard-logo .custom-logo{width:70px;max-width:70px}
  .bitard-rail>div:first-child{
    display:grid;
    grid-template-columns:max-content max-content;
    grid-template-rows:auto auto;
    column-gap:12px;
    justify-content:start;
    align-items:start;
  }
  .bitard-work-title{
    grid-column:1;
    grid-row:1;
    font-size:16px;
    margin-bottom:9px;
  }
  .bitard-filters{
    grid-column:1;
    grid-row:2;
    gap:4px;
  }
  .bitard-filter{font-size:10px}
  .bitard-filter span{font-size:7px}
  .bitard-utility{
    grid-column:2;
    grid-row:1 / span 2;
    flex-direction:column;
    gap:9px;
    margin:0;
    padding-left:12px;
    min-height:102px;
    border-left:1px solid rgba(20,20,20,.24);
  }
  .bitard-utility a{font-size:13px}
  .bitard-content{margin-left:var(--edge);width:calc(100% - var(--edge)*2)}
  .bitard-showreel{
    height:clamp(260px,72vw,360px);
    min-height:0;
  }
  .bitard-showreel__label{left:12px;bottom:11px;font-size:8px}
  .bitard-showreel__label strong{font-size:11px}
  .bitard-showreel__scroll{right:9px;bottom:11px;font-size:7px}
  .bitard-gallery{column-count:1}
  .bitard-card[data-shape="wide"]{height:58vw}
  .bitard-card[data-shape="medium"]{height:72vw}
  .bitard-card[data-shape="square"]{height:88vw}
  .bitard-card[data-shape="tall"]{height:108vw}
  .bitard-card__label{left:10px;bottom:9px;font-size:8px}
}

@media (max-width:420px){
  .bitard-logo img,.bitard-logo .custom-logo{width:70px;max-width:70px}
  .bitard-filter{font-size:9px}
  .bitard-utility{padding-left:10px;gap:8px}
  .bitard-utility a{font-size:12px}
  .bitard-showreel{height:68vw}
}

/* BITARD legal interface links */
.bitard-rail-footer {
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  white-space: normal;
}

.bitard-rail-footer__meta {
  display: flex;
  gap: 18px;
  white-space: nowrap;
}

.bitard-interface-legal {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 13px;
  font-size: 9px;
  line-height: 1.25;
}

.bitard-interface-legal a,
.bitard-interface-legal button {
  appearance: none;
  border: 0;
  background: none;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color .18s ease;
}

.bitard-interface-legal a:hover,
.bitard-interface-legal a:focus-visible,
.bitard-interface-legal button:hover,
.bitard-interface-legal button:focus-visible {
  color: var(--ink);
  outline: 0;
}

.bitard-mobile-legal {
  display: none;
}

@media (max-width: 820px) {
  .bitard-mobile-legal {
    display: block;
    margin-top: 26px;
    padding: 16px 0 4px;
    border-top: 1px solid rgba(20,20,20,.13);
  }

  .bitard-mobile-legal .bitard-interface-legal {
    gap: 8px 16px;
    font-size: 9px;
  }
}


/* BITARD_COOKIE_SETTINGS_UI */
.bitard-interface-legal button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.bitard-interface-legal button:hover,
.bitard-interface-legal button:focus-visible {
  color: var(--ink);
  outline: 0;
}


/* BITARD_LEGAL_LOWERCASE */
.bitard-interface-legal {
  text-transform: none;
}


/* BITARD_LEGAL_SIZE_POLISH */
.bitard-interface-legal {
  font-size: 10px;
}

@media (max-width: 820px) {
  .bitard-mobile-legal .bitard-interface-legal {
    font-size: 10px;
  }
}