/* ==========================================================================
   unlimited.lt — polish layer (design audit, 2026-11-06)
   Loads after site.css. Numbers in [brackets] refer to the audit findings list.
   ========================================================================== */

/* [A11y] tokens: muted text and green that pass WCAG AA on white and sky */
:root{
  --ink-3:#5A7590;          /* was #8CA4B9 = 2.6:1, now 4.8:1 on white */
  --green-ink:#0B7D40;      /* text/badge green, 5.2:1 (brand --green stays for fills/icons) */
}

/* [P1] safety net against sideways scrolling on phones */
html,body{overflow-x:clip}

/* [P1] content is visible without JavaScript; the reveal only runs when JS is on */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(16px)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}}

/* [P2] heroes: svh so the phone address bar does not make the hero jump */
@supports (height:100svh){
  .hero{min-height:92svh}
  .pagehero.herobig{min-height:calc(92svh - 78px)}
}

/* [P1] hero overlays were built for left-aligned text; text is centred now */
.hero::after{background:
  radial-gradient(ellipse 70% 60% at 50% 50%,rgba(10,22,51,.62) 0%,rgba(10,22,51,.40) 60%,rgba(10,22,51,.28) 100%)}
.pagehero.hasvid::after{background:
  radial-gradient(ellipse 70% 65% at 50% 50%,rgba(10,22,51,.78) 0%,rgba(10,22,51,.55) 60%,rgba(10,22,51,.35) 100%)}
.hero .strip span,.pagehero.herobig .strip span{color:#C3D5EA}
.hero p{color:#E4ECF6}

/* [P1] landing hero figures: three items in a 2-column grid left one orphan on phones */
@media (max-width:640px){
  .hero .strip{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;width:100%!important;text-align:center}
  .hero .strip > div{display:flex;align-items:baseline;justify-content:center;gap:10px}
  .hero .strip span{margin:0}
}

/* [P1] readable minimums: nothing functional under 12px */
.badge,.rocard .sat .badge{font-size:.75rem}
.rocard .sat .loc{font-size:.75rem}
.attr{font-size:.75rem}
.gatelist .st{font-size:.75rem}
.devtbl .tech{font-size:.75rem}
@media (max-width:640px){.campusvid .chips span{font-size:.75rem}}

/* [A11y] green text and badges: AA contrast */
.badge.sold,.rocard .sat .badge{background:var(--green-ink)}
.rocard .badge.dev{background:var(--brand)}
.cluster .loc,.gatelist li.d .st{color:var(--green-ink)}
.devtbl .tech.sold{color:#0B6B37}

/* [P2] project cards: 4 sites = one row of 4; 7 projects = 3 + 4 (Romania, then Lithuania) */
@media (min-width:1101px){
  .rocards:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  .rocards:has(> :nth-child(7):last-child){grid-template-columns:repeat(12,minmax(0,1fr))}
  .rocards:has(> :nth-child(7):last-child) > :nth-child(-n+3){grid-column:span 4}
  .rocards:has(> :nth-child(7):last-child) > :nth-child(n+4){grid-column:span 3}
  /* titles take the same two lines, so MW figures line up across a row */
  .rocard h3{min-height:2.6em;display:flex;align-items:flex-end}
}
@media (min-width:641px) and (max-width:960px){.rocards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rocards{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.rocards{grid-template-columns:1fr}}
.rocard{display:flex;flex-direction:column}
.rocard .body{flex:1;display:flex;flex-direction:column}
.rocard .more{margin-top:auto}

/* [P2] sky sections that lost their top padding (project pages) */
section.section[style*="var(--sky)"][style*="padding-top:0"]{padding-top:96px!important}
@media (max-width:640px){section.section[style*="var(--sky)"][style*="padding-top:0"]{padding-top:60px!important}}

/* [P0] portfolio table on phones: stacked rows instead of an 820px table you have to swipe */
@media (max-width:720px){
  .tbl-scroll{overflow:visible}
  .devtbl{min-width:0;display:block;font-size:.92rem}
  .devtbl thead{display:none}
  .devtbl tbody{display:block}
  .devtbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:14px 16px;border-bottom:1px solid var(--line)}
  .devtbl tr:last-child{border-bottom:0}
  .devtbl td{padding:0;border:0;white-space:normal}
  .devtbl td.name{grid-column:1;grid-row:1;white-space:normal}
  .devtbl td.r{grid-column:2;grid-row:1;font-weight:600;color:var(--ink)}
  .devtbl td:nth-child(3){grid-column:1;grid-row:2;font-size:.85rem;color:var(--ink-3)}
  .devtbl td:nth-child(4){grid-column:2;grid-row:2;text-align:right;font-size:.85rem}
  .devtbl td:nth-child(4):empty{display:none}
  .devtbl tr.grp{display:block;padding:0;border-bottom:1px solid var(--line)}
  .devtbl tr.grp td{display:block;padding:12px 16px}
  .devtbl tr.grp .grpline{flex-wrap:wrap;gap:6px 14px}
  .devtbl tr.grp .grpline > a.dr{margin-left:0}
  .devtbl tr.soldrow td{background:none}
  .devtbl tr.soldrow{background:#FAFCFA}
}

/* [Flagship] one component on all four pages: picture left, key facts right, no repeated chips */
.flag{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);margin-top:44px;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.flag-media{position:relative;min-height:460px;background:var(--navy)}
.flag-media video,.flag-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.flag-panel{display:flex;flex-direction:column;justify-content:center;gap:28px;padding:36px 36px 38px}
.flag-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin:0}
.flag-facts div{padding:16px 0;border-bottom:1px solid var(--line)}
.flag-facts div:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}
.flag-facts div:nth-child(-n+2){padding-top:0}
.flag-facts dt{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.55rem;line-height:1.1;color:var(--ink);letter-spacing:-.01em}
.flag-facts dd{margin:6px 0 0;font-size:.9rem;line-height:1.4;color:var(--ink-2)}
.flag-panel .btn{align-self:flex-start}
@media (max-width:960px){
  .flag{grid-template-columns:1fr}
  .flag-media{min-height:0;aspect-ratio:16/10}
  .flag-panel{padding:26px 22px 28px;gap:24px}
  .flag-facts dt{font-size:1.3rem}
}
@media (max-width:640px){.flag{margin-top:32px}.flag-panel .btn{align-self:stretch;justify-content:center}}

/* [AM hero] four figure boxes: centred under the centred text, labels on tight lines */
.projstats span{display:block;line-height:1.4;margin-top:4px}
.pagehero .projstats:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,230px));justify-content:center;text-align:center}
.pagehero .projstats:has(> :nth-child(4):last-child) div{padding:18px 18px 20px}
@media (max-width:820px){.pagehero .projstats:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* [Team] buttons on one line across a row, even when a role wraps to two lines */
.member{display:flex;flex-direction:column;align-items:center}
.member .btn{margin-top:auto}

/* [Why tiles] every tile heading takes two lines, so the text below starts on the same line */
.mktiles h3{min-height:2.6em;line-height:1.3}

/* [Hero] two intro paragraphs keep a gap between them */
.pagehero .wrap > p + p{margin-top:14px}

/* [Timeline] three steps fill the row instead of leaving an empty fourth column */
@media (min-width:861px){.timeline:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}

/* [Project heroes] same centred structure as the asset management hero */
.pagehero.proj{padding:110px 0 88px}
.pagehero.proj .wrap{text-align:center}
.pagehero.proj h1{max-width:30ch;margin-left:auto;margin-right:auto}
.pagehero.proj p{margin-left:auto;margin-right:auto}
.pagehero.proj .projstats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));text-align:center;max-width:1080px;margin-left:auto;margin-right:auto}
.pagehero.proj .projstats div{padding:18px 16px 20px}
@media (max-width:640px){.pagehero.proj{padding:72px 0 56px}.pagehero.proj .projstats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* [Gates] storage page has four gates (no environmental step): fill the row */
@media (min-width:1001px){.gatestrip:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}}