/* home.css - Emir (M1, Home page)

   Rules only index.html uses. Shared bits (buttons, cards, chips,
   price rows) are in components.css, header/footer in layout.css.
   Home's own ideas: the hero test strip, the stock shelf, the
   process rail. */

/* Hero: no photos, the type does the work. */
.hero { padding: var(--space-6) 0 var(--space-5); }
.hero h1 {
    font-size: clamp(2.4rem, 6vw, 3.8rem);
    line-height: 1.12;
    max-width: 14ch;              /* keeps the headline short */
    margin-bottom: var(--space-3);
}
.hero-lede {
    font-size: 1.15rem;
    max-width: 56ch;
    color: var(--text);
    margin-bottom: var(--space-4);
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

/* the lab's vital signs in mono between two hairlines,
   like text stamped on a film canister */
.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .06em;
    color: var(--muted);
}
.hero-meta span { white-space: nowrap; }

/* Test strip: five steps of the theme's own ink at rising
   density, the thing darkroom printers make before a real print.
   Pure CSS from tokens so it follows the theme like everything
   else. Decorative only, aria-hidden in the HTML. */
.test-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-1);
    margin-top: var(--space-5);
}
.test-strip .step-cell {
    height: 44px;
    border-radius: var(--radius);
    background: var(--text);
}
.test-strip .step-cell:nth-child(1) { opacity: .10; }
.test-strip .step-cell:nth-child(2) { opacity: .22; }
.test-strip .step-cell:nth-child(3) { opacity: .38; }
.test-strip .step-cell:nth-child(4) { opacity: .58; }
.test-strip .step-cell:nth-child(5) { opacity: .82; }
.test-strip-caption {
    margin: var(--space-2) 0 0;
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .12em;
    color: var(--muted);
}

/* services ("On the bench") */
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.service-card .service-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.service-card p { margin-bottom: 0; }

@media (min-width: 640px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); }
}

/* add-ons go two-column when there's room */
.addons { columns: 1; }
@media (min-width: 1024px) {
    .addons { columns: 2; column-gap: var(--space-5); }
}

/* The shelf: stock chips standing on a thick hairline "shelf edge".
   This is just the teaser, Muhammad's catalogue has the real grid. */
.shelf {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: var(--space-4);
}
.shelf-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 3px solid var(--hairline);
}
.stock-chip {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 150px;
    flex: 1 1 150px;
    padding: var(--space-3);
    background: var(--bg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
}
.stock-chip .stock-name { font-weight: 700; }
.stock-chip .stock-meta {
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--muted);
    letter-spacing: .04em;
}
.stock-chip .stock-price {
    font-family: var(--font-mono);
    font-size: .85rem;
    color: var(--accent-text);
}

/* process rail */
.process-rail {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}
.process-step {
    border-top: 2px solid var(--hairline);
    padding-top: var(--space-3);
}
.step-number {
    display: block;
    font-family: var(--font-mono);
    font-size: .85rem;
    letter-spacing: .1em;
    color: var(--accent-text);
    margin-bottom: var(--space-1);
}
.process-step h3 { margin-bottom: var(--space-1); }
.process-step p { margin-bottom: 0; }

@media (min-width: 640px) { .process-rail { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .process-rail { grid-template-columns: repeat(4, 1fr); } }

/* review highlights */
.quotes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
.quote {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin: 0;
}
.quote p { font-family: var(--font-display); font-size: 1.05rem; }
.quote cite {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--muted);
    letter-spacing: .06em;
}
@media (min-width: 640px) { .quotes { grid-template-columns: repeat(2, 1fr); } }

/* visit block */
.visit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
.visit-card h3 { margin-bottom: var(--space-2); }
.hours-list { list-style: none; margin: 0; padding: 0; }
.hours-list li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--hairline);
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list .hours-time { font-family: var(--font-mono); font-size: .85rem; color: var(--muted); }
@media (min-width: 1024px) { .visit-grid { grid-template-columns: 1fr 1fr; } }

/* closing CTA band */
.cta-band {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
}
.cta-band h2 { font-size: 1.8rem; }
.cta-band p { max-width: 52ch; margin-left: auto; margin-right: auto; }

/* Motion. Additive only: base styles never hide anything, so with
   animations off (reduced motion, print) everything renders natural.
   transform/opacity only, nothing here moves layout.
   fadeInUp itself is shared from components.css. */

/* hero typesets itself in, top to bottom */
.hero .eyebrow    { animation: fadeInUp .45s ease both; }
.hero h1          { animation: fadeInUp .45s ease both; animation-delay: .06s; }
.hero-lede        { animation: fadeInUp .45s ease both; animation-delay: .12s; }
.hero-actions     { animation: fadeInUp .45s ease both; animation-delay: .18s; }
.hero-meta        { animation: fadeInUp .45s ease both; animation-delay: .24s; }

/* then the strip "develops" left to right. No `to` frame: each cell
   lands on its own density from the rules above, not flat 1. */
@keyframes fadeIn {
    from { opacity: 0; }
}
.test-strip .step-cell { animation: fadeIn .6s ease both; }
.test-strip .step-cell:nth-child(1) { animation-delay: .30s; }
.test-strip .step-cell:nth-child(2) { animation-delay: .36s; }
.test-strip .step-cell:nth-child(3) { animation-delay: .42s; }
.test-strip .step-cell:nth-child(4) { animation-delay: .48s; }
.test-strip .step-cell:nth-child(5) { animation-delay: .54s; }

/* hover lifts for the things that feel physical: cards that aren't
   links, shelf chips, quotes. Hover stays in (hover: hover) so touch
   never sticks; presses get the same lifts via :active below. */
.stock-chip { transition: transform .25s ease, border-color .25s ease; }
.quote { transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) {
    .service-card:hover, .visit-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    }
    .stock-chip:hover { transform: translateY(-2px); border-color: var(--accent); }
    .quote:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); }
}

/* Touch has no hover, so presses reuse the same lifts via :active.
   Outside the (hover: hover) guard, which touch devices fail.
   main.js's passive touchstart listener makes iOS paint :active on
   non-interactive elements (these cards are articles, not links). */
.service-card:active, .visit-card:active {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}
.stock-chip:active { transform: translateY(-2px); border-color: var(--accent); }
.quote:active { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); }

/* menu rows answer the cursor: the item name takes the accent colour */
.addons .price-name { transition: color var(--transition); }
.addons .price-row:hover .price-name, .addons .price-row:active .price-name { color: var(--accent-text); }