/* ============================================
   MGR JEWELRY — SEO-LED SITE, 2026
   ============================================

   The components the 2026 designs need and the existing system did not have:
   a hero that is a PHOTOGRAPH first, a figure grid, a spec table, a process
   list, a gallery, a FAQ, a form layout and the mobile action bar.

   ── WHY A SIXTH STYLESHEET AND NOT INLINE STYLES ─────────────────────────
   The reference designs in docs/design/website-redesign-2026/ are single
   files with every rule inline, because that is what a design tool emits.
   Pasting them would have given each page its own private copy of the
   palette and the spacing, which is the one thing variables.css exists to
   prevent. Everything below is written in the system's own tokens, so a
   change to --accent-gold or --space-lg still reaches these pages.

   It is a NEW file rather than additions to components.css so that the four
   pages nobody redesigned (portfolio, story, privacy, terms) cannot change
   shape by accident: they do not load this file.

   Breakpoint: 760px, the same number hero-media.js uses to choose a mobile
   video source and the width the mobile design was drawn at.
   ============================================ */

/* ─── HERO: an image that may become a video ───────────────────────────────
   The <img> is a real element rather than a background, because it is the
   LCP element on every page and a background image cannot carry
   fetchpriority, width/height or alt text. hero-media.js layers a <video>
   between the image and the gradient when the page asks for one; both are
   absolutely positioned over the same box, so the photo stays visible
   underneath a video that 404s, is still buffering or was refused autoplay.

   .hero itself is a 100vh flex box in components.css. A content-height hero
   is what these designs draw, so the modifier undoes that rather than
   fighting it with !important. */
.hero--media {
    display: block;
    height: auto;
    min-height: 0;
    padding-top: 0;
    overflow: hidden;
}

.hero--media .hero__image,
.hero--media .hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% center;
    z-index: 0;
}

.hero--media .hero__overlay {
    z-index: 1;
    /* Darker at the foot than the stock overlay: these heroes carry a
       paragraph and two buttons, not a single centred word. */
    background: linear-gradient(
        to bottom,
        rgba(10, 10, 10, 0.35) 0%,
        rgba(10, 10, 10, 0.62) 45%,
        rgba(10, 10, 10, 0.94) 100%
    );
}

.hero--media .hero__content {
    position: relative;
    z-index: 2;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: calc(var(--space-4xl) + 40px) var(--container-padding) var(--space-3xl);
    text-align: left;
}

.hero--media .hero__inner {
    max-width: 780px;
}

/* THE H1 IS DELIBERATELY NOT `.hero__title`.
   animations.js hands `.hero__title` to SplitType, which rewrites it into one
   <div> per character. That is a fine thing to do to a decorative word and the
   wrong thing to do to the one element on the page carrying the search term:
   a screen reader then reads it letter by letter. Under this class the hero
   heading is simply visible from the first paint — it is inside the LCP box —
   while the eyebrow, paragraph and buttons still animate, because
   `fallbackHeroAnimation` skips a title it cannot find.

   --fs-display (up to 9rem) is a one-word size; these H1s are sentences. */
.hero__heading {
    font-size: var(--fs-h1);
    line-height: 1.06;
    margin-bottom: var(--space-md);
}

.hero--media .hero__description {
    margin: 0 0 var(--space-xl);
    max-width: 640px;
    color: var(--text-light);
}

.hero--media .hero__cta {
    justify-content: flex-start;
    margin-bottom: 0;
}

/* ─── Breadcrumb (subpages) ─── */
.breadcrumb {
    font-family: var(--font-accent);
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.breadcrumb a {
    color: var(--text-muted);
}

.breadcrumb a:hover {
    color: var(--accent-gold);
}

.breadcrumb__sep {
    margin: 0 var(--space-xs);
    color: var(--accent-gold);
    opacity: 0.6;
}

/* ─── Figure grid (the hero's hard numbers) ───────────────────────────────
   A hairline grid made of a 1px gap over a light background, so no cell
   needs a border and no edge doubles. */
.figure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background-color: rgba(255, 255, 255, 0.12);
    border: var(--border-thin);
}

.figure {
    background-color: var(--bg-dark);
    padding: var(--space-lg);
}

.figure__value {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    line-height: 1.1;
    color: var(--accent-gold);
    margin-bottom: var(--space-xs);
}

.figure__label {
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

/* ─── Section rhythm ─── */
.section {
    padding: var(--section-padding) 0;
}

.section--tight {
    padding: var(--space-2xl) 0;
}

.section--secondary {
    background-color: var(--bg-secondary);
    border-top: var(--border-thin);
    border-bottom: var(--border-thin);
}

/* ─── Media cards (a photograph above the copy) ─── */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.card-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.media-card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-card);
    border: var(--border-thin);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--duration-normal) var(--ease-out),
                transform var(--duration-normal) var(--ease-out);
}

.media-card:hover {
    border-color: var(--accent-gold);
    transform: translateY(-4px);
}

.media-card__image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.media-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-lg);
}

.media-card__title {
    font-size: var(--fs-h4);
    margin-bottom: var(--space-sm);
}

.media-card__text {
    color: var(--text-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-md);
}

.media-card__link {
    margin-top: auto;
    font-family: var(--font-accent);
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--accent-gold);
}

/* A plain card, no photograph. */
.plain-card {
    background-color: var(--bg-card);
    border: var(--border-thin);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.plain-card--dashed {
    background-color: transparent;
    border-style: dashed;
    border-color: rgba(201, 169, 98, 0.45);
}

.plain-card__title {
    font-size: var(--fs-h4);
    margin-bottom: var(--space-sm);
}

.plain-card__text {
    color: var(--text-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
}

.plain-card__meta {
    margin-top: var(--space-sm);
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-wide);
    color: var(--accent-gold);
}

/* A line of prose that follows a grid and must not sit against it. */
.after-grid {
    margin-top: var(--space-xl);
}

/* ─── Spec table: label on the left, answer on the right ─────────────────
   A real <dl>: these are term/definition pairs, and a table would claim a
   second axis that does not exist. */
.spec-table {
    margin: 0;
    border-top: var(--border-thin);
}

.spec-row {
    display: grid;
    grid-template-columns: minmax(160px, 240px) 1fr;
    gap: var(--space-lg);
    padding: var(--space-md) 0;
    border-bottom: var(--border-thin);
}

.spec-row dt {
    font-family: var(--font-accent);
    font-size: var(--fs-small);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--accent-gold);
    margin: 0;
}

.spec-row dd {
    margin: 0;
    color: var(--text-light);
    line-height: var(--lh-relaxed);
}

/* ─── Process list ─── */
.process {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-lg);
    counter-reset: step;
}

.process__step {
    padding-top: var(--space-md);
    border-top: 1px solid var(--accent-gold);
}

.process__number {
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    color: var(--accent-gold);
    display: block;
    margin-bottom: var(--space-xs);
}

.process__title {
    font-size: var(--fs-h4);
    margin-bottom: var(--space-xs);
}

.process__text {
    color: var(--text-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
}

/* A compact numbered list, used for the mobile process and "what happens
   next" in the quote aside. */
.step-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--border-thin);
    counter-reset: ministep;
}

.step-list li {
    counter-increment: ministep;
    padding: var(--space-sm) 0;
    border-bottom: var(--border-thin);
    color: var(--text-light);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
}

.step-list li::before {
    content: counter(ministep, decimal-leading-zero);
    font-family: var(--font-heading);
    color: var(--accent-gold);
    margin-right: var(--space-sm);
}

/* ─── Dashed fact list ("what you get") ─── */
.fact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 var(--space-xl);
}

.fact-list li {
    padding: var(--space-sm) 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
    color: var(--text-light);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
}

/* ─── Workshop gallery ───────────────────────────────────────────────────
   Below 760px it becomes a horizontal scroller, which is the mobile design.
   That is an overflow INSIDE the section, so the page itself still does not
   scroll sideways. */
.gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
}

.gallery__figure {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.gallery__figure--wide {
    grid-column: span 2;
}

.gallery__figure img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    transition: transform var(--duration-slow) var(--ease-out);
}

.gallery__figure:hover img {
    transform: scale(1.04);
}

.gallery__figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--space-md);
    background: linear-gradient(to top, rgba(10, 10, 10, 0.9), transparent);
    font-family: var(--font-accent);
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-light);
}

/* ─── Split: a photograph beside a block of copy ─── */
.split {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--space-2xl);
    align-items: center;
}

.split--reverse .split__media {
    order: 2;
}

.split__media img {
    width: 100%;
    border-radius: var(--radius-md);
    display: block;
}

.split__text p {
    color: var(--text-muted);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-md);
}

.split__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: var(--border-thin);
}

.split__pair h3 {
    font-family: var(--font-accent);
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--accent-gold);
    margin-bottom: var(--space-xs);
}

.split__pair p {
    margin: 0;
    font-size: var(--fs-small);
}

/* ─── FAQ ────────────────────────────────────────────────────────────────
   <details>, so every answer is in the HTML for a crawler and readable with
   no JavaScript at all. The JSON-LD FAQPage on the home page repeats these
   same five questions and answers; if one is edited, edit both. */
.faq {
    max-width: 860px;
}

.faq__item {
    border-bottom: var(--border-thin);
}

.faq__item summary {
    cursor: pointer;
    padding: var(--space-md) 0;
    font-size: var(--fs-h4);
    font-family: var(--font-heading);
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    align-items: baseline;
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

.faq__item summary::after {
    content: '+';
    color: var(--accent-gold);
    font-family: var(--font-body);
    flex-shrink: 0;
}

.faq__item[open] summary::after {
    content: '\2013';
}

.faq__answer {
    color: var(--text-muted);
    line-height: var(--lh-relaxed);
    padding-bottom: var(--space-md);
    max-width: 70ch;
}

/* ─── CTA band ─── */
.cta-band {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: var(--space-3xl) 0;
}

.cta-band__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.cta-band__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 10, 0.78);
    z-index: 1;
}

.cta-band .container {
    position: relative;
    z-index: 2;
}

.cta-band__title {
    font-size: var(--fs-h2);
    margin-bottom: var(--space-md);
}

.cta-band__text {
    color: var(--text-light);
    margin: 0 auto var(--space-xl);
    max-width: 560px;
}

.cta-band__actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ─── Packages ─── */
.packages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-lg);
    align-items: start;
}

.package {
    background-color: var(--bg-card);
    border: var(--border-thin);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
}

.package--featured {
    border-color: var(--accent-gold);
}

.package__name {
    font-size: var(--fs-h4);
    margin-bottom: var(--space-xs);
}

.package__price {
    font-family: var(--font-heading);
    color: var(--accent-gold);
    margin-bottom: var(--space-md);
}

.package__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.package__list li {
    padding: var(--space-xs) 0;
    font-size: var(--fs-small);
    color: var(--text-light);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}

/* ─── Forms ───────────────────────────────────────────────────────────── */
.form-layout {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--space-2xl);
    align-items: start;
}

.site-form {
    max-width: none;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
}

.form-select {
    width: 100%;
    padding: var(--space-md);
    background-color: var(--bg-secondary);
    border: var(--border-thin);
    border-radius: var(--radius-sm);
    color: var(--text-white);
    font-size: var(--fs-body);
    font-family: var(--font-body);
}

.form-select:focus {
    border-color: var(--accent-gold);
}

.form-hint {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

/* Radio cards — the whole box is the label, so the tap target is the card. */
.radio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-sm);
}

.radio-card {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--bg-secondary);
    border: var(--border-thin);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-small);
    transition: border-color var(--duration-fast) var(--ease-out);
}

.radio-card:hover {
    border-color: rgba(201, 169, 98, 0.6);
}

.radio-card input {
    accent-color: var(--accent-gold);
    flex-shrink: 0;
}

.radio-card:has(input:checked) {
    border-color: var(--accent-gold);
}

/* The file field. The <input type="file"> stays in the DOM and keeps working
   with JavaScript off — the dashed box is its <label>, not a replacement. */
.file-drop {
    display: block;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-sm);
    padding: var(--space-xl);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out);
}

.file-drop:hover,
.file-drop.is-over {
    border-color: var(--accent-gold);
}

.file-drop__title {
    display: block;
    font-family: var(--font-accent);
    font-size: var(--fs-small);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: var(--space-xs);
}

.file-drop__hint {
    display: block;
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

.file-drop input[type="file"] {
    display: none;
}

.file-list {
    margin-top: var(--space-sm);
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--fs-small);
    color: var(--text-muted);
    line-height: var(--lh-relaxed);
}

.form-check input {
    margin-top: 0.3em;
    accent-color: var(--accent-gold);
    flex-shrink: 0;
}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields they can see are hidden. Never focusable by a person. */
.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The in-place confirmation site-forms.js swaps in. */
.form-result {
    border: 1px solid var(--accent-gold);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    background-color: var(--bg-secondary);
}

.form-result--error {
    border-color: #b4553a;
}

.form-result__title {
    font-size: var(--fs-h4);
    margin-bottom: var(--space-sm);
}

.form-result p {
    color: var(--text-muted);
    line-height: var(--lh-relaxed);
    margin: 0;
}

.form-aside {
    background-color: var(--bg-secondary);
    border: var(--border-thin);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
}

.form-aside__title {
    font-size: var(--fs-h4);
    margin-bottom: var(--space-md);
}

.form-aside__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
}

.form-aside__note {
    font-size: var(--fs-caption);
    color: var(--text-muted);
    line-height: var(--lh-relaxed);
    padding-top: var(--space-md);
    border-top: var(--border-thin);
}

/* ─── Why-rows (gemstones) ─── */
.why-rows {
    display: grid;
    gap: var(--space-lg);
}

.why-row h3 {
    font-family: var(--font-accent);
    font-size: var(--fs-small);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--accent-gold);
    margin-bottom: var(--space-xs);
}

.why-row p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
}

/* ─── MOBILE ACTION BAR ──────────────────────────────────────────────────
   Hidden above 760px entirely — not merely moved off-screen, so it cannot
   be tabbed into on a desktop. The body gets bottom padding at the same
   width so the bar never covers the last line of the footer. */
.mobile-bar {
    display: none;
}

@media (max-width: 760px) {
    .mobile-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-xs);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background-color: rgba(10, 10, 10, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        z-index: var(--z-nav);
    }

    .mobile-bar__btn {
        display: block;
        padding: 14px;
        border-radius: var(--radius-sm);
        text-align: center;
        font-family: var(--font-accent);
        font-size: var(--fs-small);
        letter-spacing: var(--ls-wide);
    }

    .mobile-bar__btn--primary {
        background-color: var(--accent-gold);
        color: var(--bg-dark);
        font-weight: var(--fw-semibold);
    }

    .mobile-bar__btn--ghost {
        border: 1px solid var(--accent-gold);
        color: var(--text-light);
    }

    body.has-mobile-bar {
        padding-bottom: 86px;
    }
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────
   Everything above is the desktop layout; everything that must collapse
   collapses here, in one place. */
@media (max-width: 1024px) {
    .form-layout,
    .split,
    .card-grid--2 {
        grid-template-columns: 1fr;
    }

    .split--reverse .split__media {
        order: 0;
    }

    .gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery__figure--wide {
        grid-column: span 2;
    }

    .gallery__figure img {
        height: 320px;
    }
}

@media (max-width: 760px) {
    .hero--media .hero__content {
        padding: calc(var(--space-3xl) + 80px) var(--container-padding) var(--space-2xl);
    }

    .hero__heading {
        font-size: clamp(2.1rem, 9vw, 2.6rem);
    }

    .figure-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .spec-row {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

    .form-row,
    .split__pair,
    .packages,
    .card-grid {
        grid-template-columns: 1fr;
    }

    /* The mobile design scrolls the workshop photographs sideways. */
    .gallery {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .gallery__figure,
    .gallery__figure--wide {
        flex: 0 0 280px;
        scroll-snap-align: start;
    }

    .gallery__figure img {
        height: 340px;
    }

    .media-card__image {
        height: 180px;
    }

    /* 48px of side padding on a 360px screen leaves 216px of content, and the
       WhatsApp buttons in the aside carry a phone number. */
    .form-aside,
    .package {
        padding: var(--space-lg);
    }
}

/* 360px is the narrowest phone worth drawing for; nothing may force the page
   wider than the viewport there. */
@media (max-width: 400px) {
    .figure-grid {
        grid-template-columns: 1fr;
    }

    .radio-cards {
        grid-template-columns: 1fr;
    }
}