/* Golfer storefront home page — layered on top of /css/shop/shop.css
   (brand tokens, product cards and footer come from there) */

/* ─── Hero ─────────────────────────────────────────── */
.sf-hero {
    background: linear-gradient(135deg, var(--olive-dark) 0%, var(--olive) 60%, #7a6035 100%);
    padding: 4rem 5% 3.5rem;
    margin-top: 72px;
    position: relative; overflow: hidden;
}
.sf-hero::before {
    content: '⛳ 🏌️ 🌊';
    position: absolute; top: 0; right: 0;
    font-size: 8rem; opacity: 0.06; line-height: 1;
    white-space: nowrap; pointer-events: none;
}
.sf-hero-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; gap: 2.5rem;
}
.sf-photo {
    flex: 0 0 auto;
    width: 180px; height: 180px; border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--cream);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    background: var(--rust);
    display: flex; align-items: center; justify-content: center;
}
.sf-photo img { width: 100%; height: 100%; object-fit: cover; }
.sf-photo span {
    font-family: var(--font-display); font-size: 4.5rem; font-weight: 700;
    color: var(--cream);
}
.sf-eyebrow {
    display: inline-block;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cream); opacity: 0.8;
    margin-bottom: 0.4rem;
}
.sf-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 700; line-height: 1;
    color: var(--cream);
}
.sf-meta {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem;
    margin-top: 0.6rem;
    color: var(--cream-dark); font-weight: 700;
}
.sf-socials { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.sf-socials a {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: 99px;
    background: rgba(237,218,188,0.12);
    border: 1px solid rgba(237,218,188,0.25);
    color: var(--cream); text-decoration: none;
    font-size: 0.85rem; font-weight: 700;
    transition: background 0.2s, border-color 0.2s;
}
.sf-socials a:hover { background: rgba(237,218,188,0.22); border-color: rgba(237,218,188,0.5); }
.sf-social-icon { font-size: 0.95rem; line-height: 1; }
.sf-hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.sf-btn-ghost {
    background: transparent; color: var(--cream);
    border: 1.5px solid rgba(237,218,188,0.5);
}
.sf-btn-ghost:hover { border-color: var(--cream); }

/* "Follow X's Season" with RosterWallet's text logo underneath (white ROSTER, red WALLET,
   Arial Black — Archivo Black stands in on phones, which don't ship Arial Black) */
.sf-btn-season { flex-direction: column; gap: 0.3rem; padding: 0.7rem 1.8rem 0.65rem; border-radius: 22px; }
.sf-rw-wordmark {
    font-family: 'Arial Black', 'Archivo Black', Arial, sans-serif; font-weight: 900;
    font-size: 0.78rem; letter-spacing: 2px; line-height: 1;
    color: #fff;
}
.sf-rw-wallet { color: #e53935; }
.sf-rw-on {
    font-family: var(--font-body); font-weight: 700; font-size: 0.68rem;
    letter-spacing: 0.06em; text-transform: lowercase; color: var(--cream); opacity: 0.75;
    margin-right: 0.15rem;
}

/* Golfer's hero photo behind a dark olive wash so the text stays readable */
.sf-hero-photo {
    background:
        linear-gradient(135deg, rgba(63,65,36,0.92) 0%, rgba(91,93,52,0.78) 55%, rgba(122,96,53,0.55) 100%),
        var(--sf-hero-img) center / cover no-repeat;
}
.sf-hero-photo::before { content: none; }

/* ─── Section labels ───────────────────────────────── */
.sf-label {
    display: block;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--rust);
    margin-bottom: 0.3rem;
}
.sf-story h2, .sf-catalog h2 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3rem);
    color: var(--olive-dark);
    margin-bottom: 1rem;
}

/* ─── Story ────────────────────────────────────────── */
.sf-story { padding: 4rem 5% 2rem; }
.sf-story-inner { max-width: 720px; margin: 0 auto; }
.sf-story p {
    font-size: 1.05rem; line-height: 1.8;
    color: var(--text-mid);
    margin-bottom: 1rem;
}

/* ─── How backing works ────────────────────────────── */
.sf-how { padding: 1.5rem 5%; }
.sf-how-inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.sf-how-item {
    background: var(--white);
    border: 1.5px solid rgba(177,100,72,0.1);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    display: flex; align-items: center; gap: 0.8rem;
}
.sf-how-item span { font-size: 1.6rem; }
.sf-how-item p { font-weight: 700; color: var(--text-dark); font-size: 0.92rem; }

/* ─── Catalog ──────────────────────────────────────── */
.sf-catalog { padding: 3rem 5% 5rem; }
.sf-catalog-inner { max-width: 1100px; margin: 0 auto; }
.sf-empty { color: var(--text-mid); font-weight: 700; }
.sf-img-cover   { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.sf-img-contain { width: 60%; height: 60%; object-fit: contain; z-index: 1; margin: auto; display: block; }
.sf-note { font-style: italic; color: var(--rust-dark); }

/* Main shop shows a price pill on phones (added by shop.js there; rendered server-side here) */
.sf-catalog .pc-price-pill { display: none; }

/* ─── Gallery ──────────────────────────────────────── */
.sf-gallery { padding: 1rem 5% 2rem; }
.sf-gallery-inner { max-width: 1100px; margin: 0 auto; }
.sf-gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem;
    margin-top: 0.8rem;
}
.sf-gallery-item {
    position: relative; display: block;
    aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden;
    box-shadow: 0 4px 20px rgba(44,34,21,0.08);
}
.sf-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sf-gallery-item:hover img { transform: scale(1.04); }
.sf-gallery-item span {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1.6rem 0.9rem 0.7rem;
    background: linear-gradient(transparent, rgba(44,34,21,0.75));
    color: var(--cream); font-size: 0.82rem; font-weight: 700;
}

/* ─── Recent backers ───────────────────────────────── */
.sf-backers { padding: 0 5% 4.5rem; }
.sf-backers-inner { max-width: 720px; margin: 0 auto; }
.sf-backers h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 2.6rem);
    color: var(--olive-dark);
    margin-bottom: 1rem;
}
.sf-backers-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.sf-backers-list li {
    display: flex; align-items: center; gap: 0.8rem;
    background: var(--white);
    border: 1.5px solid rgba(177,100,72,0.08);
    border-radius: 12px;
    padding: 0.8rem 1rem;
}
.sf-backer-icon { font-size: 1.2rem; }
.sf-backer-text { flex: 1; color: var(--text-mid); font-size: 0.92rem; }
.sf-backer-text strong { color: var(--text-dark); }
.sf-backer-when { color: var(--rust); font-size: 0.8rem; font-weight: 800; white-space: nowrap; }

/* Gallery lightbox (storefront/public/gallery.js) */
.sf-lightbox {
    width: 100vw; height: 100vh; max-width: none; max-height: none;
    width: 100dvw; height: 100dvh;
    margin: 0; padding: 0; border: 0;
    background: rgba(20,16,10,0.9); color: var(--cream);
}
.sf-lightbox::backdrop { background: rgba(20,16,10,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sf-lightbox-stage {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 3.5rem 4.5rem;
}
.sf-lightbox-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; max-width: 100%; max-height: 100%; }
.sf-lightbox-img {
    display: block;
    /* Sized off the viewport (not %) so Safari can't let a big photo overflow */
    max-width: calc(100vw - 9rem);  max-height: calc(100vh - 9rem);
    max-height: calc(100dvh - 9rem);
    object-fit: contain; border-radius: 10px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.5);
}
.sf-lightbox-caption { font-size: 0.95rem; font-weight: 700; text-align: center; max-width: 60ch; }
.sf-lightbox-count {
    position: absolute; top: 1.2rem; left: 1.4rem;
    font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; opacity: 0.75;
}
.sf-lightbox-btn {
    position: absolute;
    width: 46px; height: 46px; border-radius: 50%;
    border: 0; cursor: pointer;
    background: rgba(237,218,188,0.14); color: var(--cream);
    font-size: 1.6rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s ease;
}
.sf-lightbox-btn:hover, .sf-lightbox-btn:focus-visible { background: var(--rust); outline: none; }
.sf-lightbox-btn[hidden] { display: none; }
.sf-lightbox-close { top: 0.9rem; right: 0.9rem; font-size: 1.1rem; }
.sf-lightbox-prev  { left: 0.9rem;  top: 50%; transform: translateY(-50%); }
.sf-lightbox-next  { right: 0.9rem; top: 50%; transform: translateY(-50%); }

/* ─── Responsive ───────────────────────────────────── */
@media (max-width: 760px) {
    .sf-hero { padding: 2.5rem 5% 2.5rem; }
    .sf-hero-inner { flex-direction: column; text-align: center; gap: 1.4rem; }
    .sf-photo { width: 140px; height: 140px; }
    .sf-meta, .sf-socials, .sf-hero-ctas { justify-content: center; }
    .sf-how-inner { grid-template-columns: 1fr; }
    .sf-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    /* Phones swipe between photos; arrows sit along the bottom instead of over the photo */
    .sf-lightbox-stage { padding: 3.5rem 0.8rem 5rem; }
    .sf-lightbox-img { max-width: calc(100vw - 1.6rem); max-height: calc(100dvh - 11rem); }
    .sf-lightbox-prev, .sf-lightbox-next { top: auto; bottom: 1rem; transform: none; }
    .sf-lightbox-prev { left: calc(50% - 56px); }
    .sf-lightbox-next { right: calc(50% - 56px); }
}
@media (max-width: 560px) {
    .sf-catalog .pc-price-pill { display: block; } /* styled by shop.css at this width */
    .sf-backers-list li { flex-wrap: wrap; }
}

/* ─── Demo shop: checkout turned off ───────────────── */
.sf-demo-checkout { padding: calc(72px + 4rem) 5% 5rem; }
.sf-demo-checkout-card {
    max-width: 560px; margin: 0 auto; text-align: center;
    background: var(--white); border: 1.5px solid rgba(177,100,72,0.12);
    border-radius: 18px; padding: 2.5rem 2rem;
    box-shadow: 0 4px 20px rgba(44,34,21,0.06);
}
.sf-demo-checkout-icon { font-size: 2.4rem; margin-bottom: 0.4rem; }
.sf-demo-checkout h1 {
    font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 2.8rem);
    color: var(--olive-dark); margin-bottom: 0.8rem;
}
.sf-demo-checkout p { color: var(--text-mid); line-height: 1.7; margin-bottom: 0.6rem; }
.sf-btn-ghost-dark { background: transparent; color: var(--olive-dark); border: 1.5px solid rgba(91,93,52,0.35); }
.sf-btn-ghost-dark:hover { border-color: var(--olive-dark); }