/* ============================================================
   MOUNT OLYMPUS AI : portfolio.css
   The "Selected work" pages only. The cards are the home page's
   .work-card pattern from style.css, unchanged; this file adds the
   dark title band and the closing tile that ends the grid.
   ============================================================ */

/* The fixed nav would otherwise cover the top of a section reached by anchor */
[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}

/* ---------- Title band: dark in BOTH themes, like the home hero and the
   careers hero, because the unscrolled nav above it is drawn in
   light-on-dark tokens. ---------- */
.pf-hero,
:root[data-theme="light"] .pf-hero{
  --bone:#F4EFE6;--bone-dim:#D6D1C8;--muted:#BDB7B0;--muted-2:#A9A39C;
  --gold-1:#A8843A;--gold-2:#C9A24B;--gold-3:#E7CD88;
  --gold-line:rgba(201,162,75,.28);--hair:rgba(244,239,230,.14);
  --grad-gold:linear-gradient(118deg,#A8843A 0%,#E7CD88 46%,#C9A24B 100%);
}
.pf-hero{
  position:relative;overflow:hidden;background:#0A0A0F;color:var(--bone);
  padding:calc(var(--nav-h) + 80px) 0 56px;
}
.pf-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;
  background-image:url("../images/texture-1200.jpg");
  background-image:image-set(url("../images/texture-1200.webp") type("image/webp"), url("../images/texture-1200.jpg") type("image/jpeg"));
  background-size:1100px auto;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
}
.pf-hero::after{
  content:"";position:absolute;left:50%;top:-30%;width:120%;height:90%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(201,162,75,.2),transparent 70%);
}
.pf-hero .wrap{position:relative;z-index:1}
.pf-hero h1{
  font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.02;letter-spacing:-.01em;
  font-size:clamp(2.9rem,7.2vw,5.4rem);color:var(--bone);
}
.pf-hero h1 em{font-style:italic}
.pf-hero .lead{margin-top:26px;font-size:1.12rem;max-width:58ch}

/* ---------- The selection ---------- */
/* Close to the title band (96px from the lead to the first card on desktop),
   so the grid follows the lead without a band of empty space between them. */
.pf-work{padding:40px 0 120px}
/* Every "Open the live demo" at the same height across a row, whatever the length
   of the sector label and description above it. Scoped to this page: the
   home's three cards stay exactly as they are. */
.pf-work .work-meta{flex:1}
.pf-work .work-cta{margin-top:auto;padding-top:10px}
/* The place on a card's sector label never splits ("Dublin, Ireland"), so the
   label wraps after the middot instead of leaving the country alone. */
.pf-place{white-space:nowrap}

/* Closing tile: the sector note and the call to action. It takes the columns
   the last row of cards leaves free, so the grid always ends square;
   portfolio.py sets --span3 (desktop, three columns) and --span2 (tablet,
   two columns) from the number of demos. */
.pf-cta{
  grid-column:span var(--span3,1);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  border-radius:20px;border:1px solid var(--gold-line);padding:40px 44px;
  background:radial-gradient(90% 120% at 100% 100%,var(--gold-faint),transparent 60%),var(--card-grad);
}
.pf-cta .eyebrow{margin-bottom:14px}
.pf-cta h2{font-size:clamp(1.9rem,3vw,2.6rem);max-width:20ch}
.pf-cta p:not(.eyebrow){margin-top:14px;font-size:1rem;font-weight:300;color:var(--bone-dim);max-width:52ch}
.pf-cta-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
/* style.css draws the ghost button for the dark hero; on a light card its
   pale border would vanish */
:root[data-theme="light"] .pf-cta .btn-ghost{border-color:var(--gold-line);background:transparent;backdrop-filter:none}

@media (max-width:1000px){
  .pf-hero{padding:calc(var(--nav-h) + 56px) 0 48px}
  .pf-work{padding:36px 0 96px}
  .pf-cta{grid-column:span var(--span2,1);padding:32px 24px}
  .pf-cta .btn{padding:15px 20px}
}
/* Tablets, when the tile is a single grid column (portfolio.py adds
   pf-cta-narrow): at 285 to 455px wide, the French gold label would break
   onto two lines. Both buttons stack at one equal width with a tighter label,
   and from 641 to 760px, the narrowest tiles, French also drops the arrow. */
@media (min-width:641px) and (max-width:1000px){
  .pf-cta-narrow .pf-cta-actions{flex-direction:column;align-items:stretch}
  .pf-cta-narrow .pf-cta-actions .btn{width:100%;padding:15px 14px;font-size:.86rem;gap:8px}
}
@media (min-width:641px) and (max-width:760px){
  .pf-cta-narrow{padding:28px 18px}
  .pf-cta-narrow:lang(fr) .btn-gold svg{display:none}
}
@media (max-width:640px){
  .pf-hero{padding:calc(var(--nav-h) + 44px) 0 40px}
  .pf-work{padding:32px 0 88px}
  .pf-cta{grid-column:auto;padding:28px 18px}
  .pf-cta-actions .btn{width:100%;padding:15px 16px}
}
/* the longest label, French, still fits on one line at 360px */
@media (max-width:400px){
  .pf-cta{padding:28px 16px}
  .pf-cta-actions .btn{padding:15px 12px;gap:8px;font-size:.88rem}
}