/* ==========================================================================
   home.css — layouts that only exist on the home page
   ========================================================================== */

.home-sections { margin-top: var(--section-space); }
.home-sections > * + * { margin-top: var(--section-space); }
.home-sections > .hsec:first-child { margin-top: 0; }

/* ---------- Sale band: full-width, dark, gold prices ----------
   margin-inline pulls the section out to both screen edges; the padding then
   puts the content back exactly where the page container's content sits. */
.hsec--sale {
    --hs-ink: var(--paper);
    --hs-bg: var(--night);
    --hs-line: rgba(246, 242, 234, 0.3);
    --rail-line: rgba(246, 242, 234, 0.18);
    --rail-bar: var(--gold-500);
    --pcard-ink: var(--paper);
    --pcard-muted: #A9A398;
    --pcard-sale: var(--gold-500);

    margin-inline: calc(50% - 50vw);
    padding: var(--space-8) max(var(--page-margin), calc((100vw - var(--container)) / 2 + var(--page-margin)));
    background:
        radial-gradient(60% 90% at 85% 0%, rgba(63, 186, 194, 0.2), transparent 70%),
        linear-gradient(135deg, var(--night), #1B3532);
    color: var(--paper);
}
.hsec--sale .hsec__kicker { color: var(--gold-500); }

/* ---------- Editorial: one large lead product + four small ---------- */
.editorial {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6) var(--gutter);
}
.editorial .pcard--lead {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
}
.editorial .pcard--lead .pcard__media { flex: 1; aspect-ratio: auto; min-height: 20rem; }   /* fills the height of the two small rows */
.editorial .pcard--lead .pcard__title { font-size: var(--fs-md); }
.editorial .pcard--lead .pcard__price { font-size: var(--fs-base); }

@media (max-width: 767px) {
    .editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); }
    .editorial .pcard--lead { grid-row: auto; }
    .editorial .pcard--lead .pcard__media { flex: none; aspect-ratio: 4 / 5; min-height: 0; }
}

/* ---------- Promo tiles ---------- */
.promos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--gutter);
}
.promo {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-sm);
    background: var(--line);
}
.promo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;                  /* any image shape is cropped to the tile: no more broken layouts */
    transition: transform 800ms var(--ease-out);
}
.promo::after {                         /* dark scrim so the caption stays readable on any photo */
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(20, 32, 31, 0.75), transparent);
    pointer-events: none;
}
.promo__cap {
    position: absolute;
    inset-inline: var(--space-5);
    bottom: var(--space-5);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.4;
}
.promo__cap .icon { flex: none; transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) {
    .promo:hover img { transform: scale(1.05); }
    .promo:hover .promo__cap .icon { transform: translateX(-6px); }
}

/* Fewer banners get wider, shorter tiles */
.promos:has(> :nth-child(2):last-child) .promo { aspect-ratio: 16 / 10; }
.promos:has(> :only-child) .promo { aspect-ratio: 21 / 9; }

@media (max-width: 639px) {
    .promos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .promo__cap { inset-inline: var(--space-3); bottom: var(--space-3); font-size: var(--fs-sm); }
}

/* ---------- Full-bleed helper ----------
   Stretches a section to both screen edges, then puts its content back where
   the page container's content sits. */
.bleed {
    margin-inline: calc(50% - 50vw);
    padding-inline: max(var(--page-margin), calc((100vw - var(--container)) / 2 + var(--page-margin)));
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);   /* text on the right (start), photos on the left */
    align-items: center;
    gap: var(--space-8);
    padding-block: var(--space-8) var(--space-9);
    background:
        radial-gradient(55% 70% at 80% 30%, rgba(63, 186, 194, 0.16), transparent 70%),
        radial-gradient(40% 50% at 10% 90%, rgba(185, 139, 42, 0.1), transparent 70%);
}

.hero__kicker {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--gold-700);
}
.hero__title {
    margin: 0 0 var(--space-5);
    font-size: clamp(2.5rem, 1.4rem + 3.8vw, 4.75rem);   /* 40px on phones, 76px max */
}
.hero__title em { font-style: normal; color: var(--teal-700); }
.hero__lead {
    max-width: 34rem;
    margin: 0 0 var(--space-6);
    font-size: var(--fs-md);
    color: var(--ink-soft);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Photo composition: three 4:5 frames at different sizes and offsets, layered.
   Percentages are of the art box, so it scales as one piece. */
.hero__art { position: relative; aspect-ratio: 1 / 0.88; }



.hero__fig {
    position: absolute;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--line);
    box-shadow: var(--shadow-3);
}
.hero__fig img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-large) var(--ease-out);
}
.hero__fig--1 { width: 46%; inset-block-start: 0;   inset-inline-start: 4%;  z-index: 2; }
.hero__fig--2 { width: 38%; inset-block-start: 20%; inset-inline-start: 44%; z-index: 1; }
.hero__fig--3 { width: 28%; inset-block-end: 0;     inset-inline-end: 0;     z-index: 3; }
@media (hover: hover) { .hero__fig:hover img { transform: scale(1.05); } }

/* Shown only when there are no products yet */
.hero__pattern {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 6 50 28 28 50 6 28Z' fill='none' stroke='%231E6F76' stroke-opacity='.3' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* Entrance: runs once when the page loads. "backwards" means the starting
   state applies during the delay, and the normal styles take over afterwards
   (so the photo shadows are not left clipped). */
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes hero-fig  { from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(28px); } }

.hero__text > * { animation: hero-rise 800ms var(--ease-out) backwards; }
.hero__text > :nth-child(1) { animation-delay: 80ms; }
.hero__text > :nth-child(2) { animation-delay: 160ms; }
.hero__text > :nth-child(3) { animation-delay: 260ms; }
.hero__text > :nth-child(4) { animation-delay: 340ms; }
.hero__fig { animation: hero-fig 1000ms var(--ease-out) backwards; }
.hero__fig--1 { animation-delay: 200ms; }
.hero__fig--2 { animation-delay: 340ms; }
.hero__fig--3 { animation-delay: 480ms; }

@media (max-width: 899px) {
    .hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); padding-block: var(--space-7) var(--space-8); }
    .hero__art { width: 100%; max-width: 34rem; margin-inline: auto; }
}

/* ==========================================================================
   Category index
   ========================================================================== */
.cats__head { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-4); }
.cats__label { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--gold-700); }
.cats__rule { flex: 1; height: 1px; background: var(--line); }

.cats__list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .cats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cats__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--line);
}
.cats__link::after {                    /* ink line that draws over the hairline on hover */
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform var(--dur-base) var(--ease-out);
}
.cats__num { min-width: 2.5ch; font-size: var(--fs-sm); font-weight: 600; color: var(--gold-700); }
.cats__name {
    flex: 1;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: var(--lh-heading);
    transition: transform var(--dur-base) var(--ease-out), color var(--dur-micro);
}
.cats__link .icon { opacity: 0.55; transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out); }
@media (hover: hover) {
    .cats__link .icon { opacity: 0; transform: translateX(8px); }
    .cats__link:hover::after { transform: scaleX(1); }
    .cats__link:hover .cats__name { transform: translateX(-8px); color: var(--teal-800); }
    .cats__link:hover .icon { opacity: 1; transform: none; }
}

/* ==========================================================================
   Visit-us band
   ========================================================================== */
.visit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-7);
    margin-top: var(--section-space);
    padding-block: var(--space-9);
    background: var(--teal-100);
}
.visit__kicker {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--teal-800);
}
.visit__title { margin: 0 0 var(--space-5); font-size: var(--fs-h1); }
.visit__address { display: flex; gap: var(--space-3); max-width: 32rem; margin: 0 0 var(--space-6); color: var(--ink-soft); }
.visit__address .icon { margin-top: 0.45em; color: var(--teal-700); }

.visit__art {
    align-self: stretch;
    min-height: 16rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 8 64 36 36 64 8 36Z' fill='none' stroke='%231E6F76' stroke-opacity='.35' stroke-width='1.2'/%3E%3Cpath d='M36 22 50 36 36 50 22 36Z' fill='none' stroke='%23B98B2A' stroke-opacity='.5' stroke-width='1.2'/%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 70%);
    mask-image: linear-gradient(to left, transparent 0%, #000 70%);   /* pattern fades out toward the text */
}
@media (max-width: 767px) {
    .visit { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-8); }
    .visit__art { min-height: 8rem; }
}

/* On the home page the band touches the footer directly */
body:has(.visit) .site-footer { margin-top: 0; }