/* =====================================================================
   Tbilisi Architecture Forum — site styles

   Ported from the <helmet> block of "Tbilisi Architecture Forum.dc.html".
   Everything that used to be a state-driven inline style ({{ menuStyle.* }},
   {{ showBurger }}, tab colours, ...) now lives here as a class or a media
   query, so the PHP templates stay static and site.js only toggles classes.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Fonts
   PP Mondwest / PP Neue Bit are licensed (Pangram Pangram). Drop the files
   into /fonts at the project root and the pixel type switches over on its
   own; until then the Google pixel font picked in Settings is used.
   --------------------------------------------------------------------- */
@font-face{font-family:'PP Mondwest';font-style:normal;font-weight:400;font-display:swap;src:url('../../fonts/PPMondwest-Regular.woff2') format('woff2'),url('../../fonts/PPMondwest-Regular.woff') format('woff'),url('../../fonts/PPMondwest-Regular.otf') format('opentype');}
@font-face{font-family:'PP Mondwest';font-style:normal;font-weight:700;font-display:swap;src:url('../../fonts/PPMondwest-Bold.woff2') format('woff2'),url('../../fonts/PPMondwest-Bold.woff') format('woff'),url('../../fonts/PPMondwest-Bold.otf') format('opentype');}
@font-face{font-family:'PP Neue Bit';font-style:normal;font-weight:400;font-display:swap;src:url('../../fonts/PPNeueBit-Regular.woff2') format('woff2'),url('../../fonts/PPNeueBit-Regular.woff') format('woff'),url('../../fonts/PPNeueBit-Regular.otf') format('opentype');}
@font-face{font-family:'PP Neue Bit';font-style:normal;font-weight:700;font-display:swap;src:url('../../fonts/PPNeueBit-Bold.woff2') format('woff2'),url('../../fonts/PPNeueBit-Bold.woff') format('woff'),url('../../fonts/PPNeueBit-Bold.otf') format('opentype');}
@font-face{font-family:'PP NeueBit';src:url('../../uploads/ppneuebit-bold.otf') format('opentype');font-weight:100 900;font-style:normal;font-display:block;}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#0c0b0a;}
body{overflow-x:hidden;}
::selection{background:#ff4d00;color:#0c0b0a;}

/* ---------------------------------------------------------------------
   Keyframes
   --------------------------------------------------------------------- */
@keyframes taf-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes taf-mqr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes taf-kb{0%{transform:scale(1.06)}100%{transform:scale(1.18)}}
@keyframes taf-scan{0%{transform:translateY(-130%)}100%{transform:translateY(460%)}}
@keyframes taf-blink{0%,46%{opacity:1}48%,100%{opacity:.15}}
@keyframes taf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes taf-glow{0%,100%{box-shadow:0 0 0 0 rgba(171,247,52,.9)}50%{box-shadow:0 0 26px 5px rgba(171,247,52,.65)}}

[data-theme-card]:hover [data-px]{opacity:1 !important;transform:translateY(0) !important;}

/* ---------------------------------------------------------------------
   Accent chip inside CMS headings — editors write <em>word</em> and it
   renders the way the original hard-coded <span> did.
   --------------------------------------------------------------------- */
.taf-title em{
  font-style:normal;
  background:var(--chipBg);
  color:var(--chipInk);
  padding:0 .08em;
}

/* ---------------------------------------------------------------------
   Menu overlay  (was {{ menuStyle.* }})
   --------------------------------------------------------------------- */
#taf-menu{
  opacity:0;
  visibility:hidden;
  transform:translateY(-22px);
  pointer-events:none;
}
#taf-menu.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

/* ---------------------------------------------------------------------
   Video modal  (was {{ videoStyle.* }})
   --------------------------------------------------------------------- */
#taf-video{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#taf-video.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
#taf-video .taf-video-frame{
  transform:translateY(14px) scale(.98);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
#taf-video.is-open .taf-video-frame{
  transform:translateY(0) scale(1);
}

/* ---------------------------------------------------------------------
   Person profile overlay (speakers + board members)

   Every panel is in the document; only the requested one is shown. The
   closed state is display:none, so the hidden panels cost nothing in
   layout and stay out of the tab order.

   The id here MUST match #taf-profile-modal in partials/profile-modal.php —
   if it does not, the overlay loses display:none and covers the whole site.
   --------------------------------------------------------------------- */
#taf-profile-modal{
  display:none;
  opacity:0;
}
#taf-profile-modal.is-open{
  display:block;
  opacity:1;
}
.taf-speaker-panel{display:none;}
.taf-speaker-panel.is-active{display:block;}

.taf-speaker-grid{
  display:grid;
  grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);
  align-items:start;
  max-width:1240px;
}
@media (max-width:860px){
  .taf-speaker-grid{
    grid-template-columns:1fr;
    gap:clamp(22px,4vh,34px);
  }
  .taf-speaker-grid > div:first-child{max-width:320px;}
}

/* "Read profile" — a small grey hint in the bottom-right corner of a card,
   revealed on hover or keyboard focus. `display:flex` (not inline-flex) is
   what lets justify-content push it to the right edge. */
.taf-more{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  margin-top:10px;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--grey);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .35s ease,transform .35s ease,color .3s ease;
}
[data-speaker-card]:hover .taf-more,
[data-speaker-card] button:focus-visible .taf-more{
  opacity:1;
  transform:translateY(0);
  color:var(--ink);
}
[data-speaker-card] button:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:-2px;
}

/* ---------------------------------------------------------------------
   Partners slider — one category per slide

   Logo boxes are a FIXED size on purpose: every logo lands in the same
   rectangle and is fitted inside it with object-fit:contain, so mixed
   aspect ratios and oversized uploads cannot break the row. Change the
   two values below to resize every logo at once.
   --------------------------------------------------------------------- */
:root{
  --partner-w: 190px;   /* logo box width  */
  --partner-h: 84px;    /* logo box height */
}

.taf-partner-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-bottom:clamp(24px,3.5vh,40px);
}
.taf-partner-tab{
  flex:1 1 auto;
  min-width:140px;
  padding:13px 18px;
  border:none;
  cursor:pointer;
  font:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--bg);
  color:var(--grey);
  transition:background .35s ease,color .35s ease;
}
.taf-partner-tab:hover{color:var(--ink);}
.taf-partner-tab.is-active{background:var(--orange);color:#0c0b0a;}

.taf-partner-stage{
  border:1px solid var(--line);
  padding:clamp(24px,4vh,48px) clamp(18px,3vw,40px);
  min-height:calc(var(--partner-h) + 60px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.taf-partner-slide{display:none;width:100%;}
.taf-partner-slide.is-active{display:block;animation:taf-partner-in .45s ease both;}
@keyframes taf-partner-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.taf-partner-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,3vw,52px);
}
.taf-partner-cell{
  width:var(--partner-w);
  height:var(--partner-h);
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:var(--grey);
}
.taf-partner-logo{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  filter:grayscale(1);
  opacity:.75;
  transition:filter .35s ease,opacity .35s ease;
}
.taf-partner-cell:hover .taf-partner-logo{filter:grayscale(0);opacity:1;}
.taf-partner-name{
  font-weight:700;
  font-size:clamp(14px,1.3vw,18px);
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:center;
  transition:color .3s ease;
}
.taf-partner-cell:hover .taf-partner-name{color:var(--orange);}

.taf-partner-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-top:clamp(18px,2.6vh,28px);
}
.taf-partner-count{
  font-family:var(--pixel);
  font-size:13px;
  letter-spacing:.08em;
  color:var(--grey);
}
.taf-partner-dots{display:flex;gap:8px;}
.taf-partner-dot{
  width:9px;
  height:9px;
  padding:0;
  border:1px solid var(--grey);
  background:transparent;
  cursor:pointer;
  transition:background .3s ease,border-color .3s ease;
}
.taf-partner-dot.is-active{background:var(--orange);border-color:var(--orange);}
.taf-partner-arrows{display:flex;gap:8px;}
.taf-partner-arrow{
  width:38px;
  height:38px;
  border:1px solid var(--line);
  background:none;
  color:var(--ink);
  font-family:var(--pixel);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  transition:color .3s ease,border-color .3s ease;
}
.taf-partner-arrow:hover{color:var(--orange);border-color:var(--orange);}

@media (max-width:760px){
  :root{
    --partner-w: 132px;
    --partner-h: 60px;
  }
  .taf-partner-tab{min-width:0;flex:1 1 45%;font-size:11px;padding:11px 12px;letter-spacing:.08em;}
  .taf-partner-controls{justify-content:center;}
}

@media (prefers-reduced-motion:reduce){
  .taf-partner-slide.is-active{animation:none;}
}

/* ---------------------------------------------------------------------
   About overlay  (was <sc-if value="{{ aboutOpen }}">)
   --------------------------------------------------------------------- */
#taf-about-view{
  display:none;
}
#taf-about-view.is-open{
  display:block;
}

/* ---------------------------------------------------------------------
   Responsive nav  (was {{ showDesktopNav }} / {{ showBurger }} driven by
   the isMobile state; the breakpoint is the original 760px)
   --------------------------------------------------------------------- */
.taf-nav-links{display:flex;align-items:center;gap:clamp(18px,2.2vw,42px);}
.taf-burger{display:none;}
@media (max-width:760px){
  .taf-nav-links{display:none;}
  .taf-burger{display:flex;}
}

/* ---------------------------------------------------------------------
   Program day tabs  (was {{ d.tabStyle.* }})
   --------------------------------------------------------------------- */
.taf-day-tab{
  background:transparent;
  color:var(--ink);
}
.taf-day-tab.is-active{
  background:var(--orange);
  color:#0c0b0a;
}

/* ---------------------------------------------------------------------
   Program day panels — only the active day's paragraphs are shown
   --------------------------------------------------------------------- */
.taf-day-panel{display:none;}
.taf-day-panel.is-active{display:block;}

/* ---------------------------------------------------------------------
   Ticket cards — the site's standard bordered card in a gapped grid,
   matching Themes / Get Involved. The whole card is a link: it lifts and
   lights its border on hover (see the hv() class in the template, which
   carries !important so it beats the inline reveal transform).

   A gapped grid (rather than 1px hairlines over a coloured container) also
   means the empty cell left by five cards in a three-column row simply
   stays blank.
   --------------------------------------------------------------------- */
/* A query container so the name and price can be sized from the CARD's width
   rather than the viewport's. The grid packs 3 columns at 1280 but 4 at 1366
   and 5 at 1920, so the card interior actually gets *narrower* as the screen
   grows — a vw-based size cannot follow that and would overflow. */
.taf-ticket{
  container-type:inline-size;
  border:1px solid var(--line);
  background:var(--bg);
}
.taf-ticket.is-highlight{
  border-color:var(--orange);
  background:var(--ticketHi);
}

/* Tier name: the loudest thing on the card, set in the accent block the
   hero's aftermovie label already uses.

   Sized to keep every tier on a single line: "FULL FORUM PASS" is the widest
   at ~9.3x its font-size, so the ceiling is (card interior - side padding)
   / 9.3. The side padding is trimmed to 11px to hand those px back to the
   type, which is what allows 9.6cqw instead of 9.2. The vw line above is the
   fallback for browsers without container queries. */
.taf-ticket-name{
  align-self:flex-start;
  max-width:100%;
  margin:0;
  padding:8px 11px 7px;
  background:var(--orange);
  color:#0c0b0a;
  font-size:clamp(19px,2.15vw,30px);
  font-size:clamp(17px,9.6cqw,36px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.022em;
  text-transform:uppercase;
}

/* The VIP card inverts its background, which older builds let bleed into the
   name as lime-on-grey text. The name block is lime with black type on every
   tier, highlighted or not. */
.taf-ticket.is-highlight .taf-ticket-name{
  background:var(--orange);
  color:#0c0b0a;
}

/* Price: plain type in the body ink, no accent block — it carries its weight
   by size alone. Zero padding so it starts flush with the name block and the
   feature bullets rather than sitting a few px to their right.
   PP NeueBit draws ₾ far taller than its own digits — measured at 100px the
   digits cap at 51 while ₾ reaches 74 — so equal font-size does NOT read as
   equal size. The currency is scaled by 51/74 ≈ 0.689 to match. */
.taf-ticket-price{
  align-self:flex-start;
  display:flex;
  align-items:baseline;
  gap:.08em;
  margin:clamp(18px,2.6vh,28px) 0 clamp(18px,2.6vh,28px);
  padding:0;
  color:var(--ink);
  font-family:var(--pixel);
  font-size:clamp(54px,6.2vw,88px);
  font-size:clamp(54px,50cqw,190px);
  font-weight:600;
  line-height:1;
}
.taf-ticket-cur{
  font-size:.689em;
  line-height:1;
}
/* ---------------------------------------------------------------------
   FAQ accordion  (was {{ f.bodyStyle }} / {{ f.signStyle }})
   --------------------------------------------------------------------- */
.taf-faq-body{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .4s ease;
}
.taf-faq.is-open .taf-faq-body{
  max-height:320px;
  opacity:1;
}
.taf-faq-sign{
  transform:rotate(0deg);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.taf-faq.is-open .taf-faq-sign{
  transform:rotate(45deg);
}

/* ---------------------------------------------------------------------
   Loader — hidden outright when disabled in Settings
   --------------------------------------------------------------------- */
#taf-loader.is-hidden{display:none;}

/* ---------------------------------------------------------------------
   Reduced motion: kill the marquees and reveal everything immediately.
   site.js does the same for JS-driven motion.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  [style*="taf-mq"],[style*="taf-float"],[style*="taf-glow"],[style*="taf-blink"]{
    animation:none !important;
  }
  [data-reveal],[data-hero-reveal]{
    opacity:1 !important;
    transform:none !important;
  }
}