/* ===========================================================
   UNAMIQ - Capabilities page
   Loaded last, after tokens -> base -> layout -> components.
   Holds the process disclosures, the gallery, the "why us"
   statements and the closing call to action.
=========================================================== */

/* ---------- Hero ---------- */

.cap-hero{
    max-width:760px;
    margin-bottom:100px;
}

.cap-hero-copy{
    font-size:clamp(1.15rem, 2.4vw, 1.55rem);
    font-weight:500;
    line-height:1.5;
    letter-spacing:.005em;
    color:var(--text-strong, rgba(255,255,255,.92));
    margin-bottom:22px;
}

.cap-tagline{
    font-family:"Space Mono", monospace;
    font-size:var(--fs-xs);
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--accent-ink);
}

/* ---------- Process cards ---------- */

.process-section{
    margin-bottom:130px;
}

/* The heading pair carries its own spacing; the grid's margin-top
   is what separates it from the cards. */
.process-section .section-heading{
    margin-bottom:0;
}

/* Three stages, not four — see the comment in capabilities.php.

   The cards are open at all times now, so there is no reveal to
   expand and align-items can go back to its default stretch. That
   is what makes all three exactly the same height: the grid sizes
   every card to the tallest one, whatever its copy runs to.

   It also removes the machinery this section used to need — a
   button per card, an aria-expanded state, a 0fr -> 1fr reveal and
   js/process-cards.js. Content nobody has to uncover needs none
   of it. */
.process-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;

    margin-top:38px;
}

.process-card{
    position:relative;
    z-index:1;

    padding:28px 26px 30px;
    /* Filled rather than outlined: three outlines on white read as
       three separate things, a filled row reads as one sequence.
       See docs/style/60-30-10.md. */
    background:var(--bg-alt);
    border:1px solid var(--media-border);
    box-shadow:var(--media-shadow);

    transform-origin:center;
}

/* A process card behaves like a framed picture: the same line, the
   same glow, the same growth. The scale itself comes from the
   shared block in components.css. */
@media (hover: hover) and (pointer: fine){

    .process-card:hover{
        z-index:5;
        border-color:var(--media-border-hover);
        box-shadow:var(--media-shadow-hover);
        background-color:var(--card-bg-hover, rgba(255,255,255,.025));
    }

}

/* Grey at rest, accent on the card you are pointing at. The numbers
   used to alternate accent / muted by nth-child, which read as a
   rendering fault rather than a rhythm. */
.process-index{
    display:block;
    font-family:"Space Mono", monospace;
    font-size:var(--fs-xs);
    letter-spacing:.1em;
    color:var(--text-faint, rgba(255,255,255,.4));
    margin-bottom:16px;

    transition:color .4s ease;
}

@media (hover: hover) and (pointer: fine){
    .process-card:hover .process-index{
        color:var(--accent-ink);
    }
}

.process-title{
    font-size:var(--fs-lg);
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    margin-bottom:12px;
}

/* No line reservation any more. It existed to make three COLLAPSED
   cards the same height; the grid does that itself now that they
   are all open. */
.process-teaser{
    display:block;

    font-size:var(--fs-base);
    line-height:1.65;
    color:var(--text-muted, rgba(255,255,255,.56));
}

.process-detail{
    margin-top:16px;
    font-size:var(--fs-base);
    line-height:1.65;
    color:var(--text-muted, rgba(255,255,255,.56));
}

/* Uses .placeholder-box from components.css; only the ratio
   and top margin are specific to a process card. */
.process-image,
.process-image-placeholder{
    margin-top:16px;
    aspect-ratio:4 / 3;
}

.process-image{
    background:var(--card-bg-hover);
}

.process-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

@media(max-width:900px){

    .process-grid{
        grid-template-columns:1fr 1fr;
        row-gap:22px;
    }

}

@media(max-width:560px){

    .process-grid{ grid-template-columns:1fr; }

}

/* ---------- Gallery section ----------
   Holds the two project cards. The cards themselves are a shared
   component and live in components.css: the style guide renders
   them too, and a class used by two pages cannot live in one
   page's stylesheet.

   This section replaced a six-column tile gallery whose five tiles
   all looked clickable and none of which were. The classes for that
   grid (.gallery-grid, .gallery-tile, .tile-large, .tile-tag,
   .tile-placeholder) were removed with it.
=========================================================== */

.gallery-section{
    margin-bottom:120px;
}

.gallery-section .section-heading{
    margin-top:8px;
    margin-bottom:40px;
}

/* ---------- Why UNAMIQ ---------- */

.why-section{
    margin-bottom:110px;
}

/* The grid's margin-top does the spacing under the heading. */
.why-section .section-heading{
    margin-bottom:0;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:44px;

    margin-top:34px;
}

/* The rules are the text colour, not the accent — near-black in
   light, near-white in dark, matching the neutral treatment the
   footer's Contact button uses. Three orange rules here plus the
   orange eyebrow, the CTA and the section labels put the accent
   well past the 10% it is budgeted for on this page, and a rule
   under a statement is structure rather than something to look
   at. See docs/style/60-30-10.md.

   Before that they were all --accent; before THAT the middle one
   was a different colour again, with no reason behind it. */
.why-card{
    padding-top:26px;
    border-top:2px solid var(--text);
}

.why-quote{
    font-size:var(--fs-lg);
    font-weight:700;
    line-height:1.35;
    letter-spacing:.01em;
    margin-bottom:16px;
}

.why-copy{
    font-size:var(--fs-base);
    line-height:1.7;
    color:var(--text-muted, rgba(255,255,255,.56));
}

@media(max-width:900px){

    .why-grid{
        grid-template-columns:1fr;
        gap:36px;
    }

}

/* ---------- Closing CTA ---------- */

/* The button sits BELOW the invitation rather than opposite it, so
   the three lines read in order: question, answer, action. */
.cap-cta{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:28px;

    padding:48px 0 20px;
    border-top:1px solid var(--border-color, rgba(255,255,255,.1));
}

/* Matches .projects-cta-text on the Projects page. The two closing
   CTA blocks have identical markup, and this class was in the markup
   with no rule at all — so a longer label would have wrapped
   differently on the two pages for no reason. No visual change today:
   the flex child sizes to 299px of content, well under the max. */
.cap-cta-text{
    max-width:460px;
}

.cap-cta-label{
    font-family:"Space Mono", monospace;
    font-size:var(--fs-xs);
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--accent-ink);
    margin-bottom:10px;
}

.cap-cta-heading{
    font-size:clamp(1.2rem, 2.6vw, 1.7rem);
    font-weight:700;
    letter-spacing:.02em;
}

/* The plain .cta-button — see components.css. It used to carry an
   accent modifier; it matches the footer's neutral button now, so
   the accent fill belongs to the Contact page's Send button alone.
   flex-shrink is the only genuinely page-specific part. */
.cap-cta .cta-button{
    flex-shrink:0;
}

/* Already a column at every width, so nothing to change here. */