/* ============================================================
   Stephen Bolin Photography — v2 supplemental styles
   Loaded AFTER css/style.css. Only adds the category dropdown
   navigation and a couple of v2-only helpers; the base theme
   (colors, type, hero, gallery, pricing) is inherited unchanged.
   ============================================================ */

/* --- Dropdown navigation (desktop) ------------------------- */
.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-group-label {
    font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: .35em; cursor: pointer;
    position: relative; padding-bottom: 2px;
}
.nav-group-label .caret { font-size: .7em; transition: transform .25s; opacity: .8; }
.nav-group:hover .caret,
.nav-group:focus-within .caret { transform: rotate(180deg); }
.nav-group-label::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 0; height: 1px; background: var(--accent); transition: width .25s;
}
.nav-group:hover .nav-group-label::after,
.nav-group-label.active::after { width: 100%; }

.nav-dropdown {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
    min-width: 210px; background: rgba(14,14,14,.98);
    border: 1px solid rgba(240,236,228,.10); border-radius: 2px;
    padding: .4rem 0; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease; z-index: 120;
    box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
    display: block; padding: .6rem 1.3rem; white-space: nowrap;
    font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
}
.nav-dropdown a::after { display: none; }          /* no underline animation inside the menu */
.nav-dropdown a:hover,
.nav-dropdown a.active { color: var(--accent); background: rgba(201,168,76,.06); }
.nav-book { color: var(--accent); }
/* dropdowns near the right edge (Book) open right-aligned instead of centered
   (desktop only — the mobile panel below lays every dropdown out flat) */
@media (min-width: 601px) {
    .nav-group-right .nav-dropdown { left: auto; right: 0; transform: translateY(6px); }
    .nav-group-right:hover .nav-dropdown,
    .nav-group-right:focus-within .nav-dropdown { transform: translateY(0); }
}

/* Instagram button: icon-only on desktop, labeled row on mobile */
.nav-ig { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent); }
.nav-ig svg { display: block; }
.nav-ig::after { display: none; }
.nav-ig .nav-ig-label { display: none; }
.nav-ig:hover { color: var(--white); }

/* --- Dropdown navigation (mobile: reuse the .open panel) ---- */
@media (max-width: 600px) {
    .nav-group { display: block; width: 100%; }
    .nav-group-label { padding: .7rem 1.5rem; width: 100%; justify-content: flex-start; }
    .nav-dropdown {
        position: static; transform: none; opacity: 1; visibility: visible;
        pointer-events: auto; min-width: 0; width: 100%; border: none;
        box-shadow: none; background: rgba(255,255,255,.02); padding: 0;
    }
    .nav-dropdown a { padding-left: 3rem; text-transform: none; letter-spacing: .04em; }
    .nav-group-label .caret { display: none; }
    .nav-ig { padding: .7rem 1.5rem; width: 100%; justify-content: center; }
    .nav-ig .nav-ig-label { display: inline; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
}

/* --- v2-only helpers --------------------------------------- */
.page-body { max-width: 720px; margin: 0 auto 2.5rem;
             color: var(--white); opacity: .92; }
.page-body p { margin-bottom: 1rem; }
.page-body h2, .page-body h3, .page-body h4 { font-weight: normal; margin: 1.2rem 0 .6rem; }
.page-body a { color: var(--accent); text-decoration: underline; }
.page-body ul, .page-body ol { margin: 0 0 1rem 1.4rem; }
.subpage-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--gap); margin-top: 2rem;
}

/* --- Block hero: cover-crop to a sane band (not full natural height) --- */
.hero--block { min-height: 62vh; max-height: 80vh; }
.hero--block .hero-img { position: absolute; inset: 0; height: 100%; width: 100%; }
.hero--block .hero-img img { height: 100%; width: 100%; object-fit: cover; }
@media (max-width: 600px) { .hero--block { min-height: 50vh; } }

/* --- Single & dual image sections -------------------------- */
.v2-img { margin: 0 auto; }
.v2-img--full   { max-width: 100%; }
.v2-img--wide   { max-width: 920px; }
.v2-img--medium { max-width: 600px; }
.v2-img .gallery-item, .v2-duo .gallery-item { cursor: zoom-in; }
.v2-img img { width: 100%; height: auto; border-radius: 3px; display: block; }
.v2-img figcaption, .v2-duo figcaption {
    text-align: center; color: var(--grey); font-size: .85rem; font-style: italic; margin-top: .7rem;
}
.v2-duo {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start;
}
.v2-duo figure { margin: 0; }
.v2-duo img { width: 100%; height: auto; border-radius: 3px; display: block; }
@media (max-width: 600px) { .v2-duo { grid-template-columns: 1fr; } }

/* Fixed aspect-ratio cells cover-crop to a uniform, tidy shape */
.v2-img .gallery-item.has-ar, .v2-duo .gallery-item.has-ar {
    aspect-ratio: var(--ar); overflow: hidden; border-radius: 3px;
}
.v2-img .gallery-item.has-ar img, .v2-duo .gallery-item.has-ar img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 3px;
}
/* Match-height pair (justified row): figures grow proportional to each image's
   aspect ratio, so both render at the SAME height and butt up against the gap
   with equal outer margins — the narrow portrait has no empty side voids. */
.v2-duo--fit { display: flex; align-items: flex-start; gap: var(--gap); }
.v2-duo--fit figure { flex-basis: 0; min-width: 0; margin: 0; }
.v2-duo--fit .gallery-item img { width: 100%; height: auto; border-radius: 3px; }
@media (max-width: 600px) {
    .v2-duo--fit { flex-direction: column; }
    .v2-duo--fit figure { flex-basis: auto; width: 100%; }
}

/* --- Lightbox caption + gallery "Load more" ---------------- */
.lightbox-caption {
    position: absolute; bottom: 1.1rem; left: 0; right: 0; text-align: center;
    color: var(--white); font-size: .92rem; font-style: italic; padding: 0 1.2rem;
    text-shadow: 0 1px 5px rgba(0,0,0,.85); pointer-events: none;
}
.gallery-grid.gallery-collapsed .gallery-item:nth-child(n+13) { display: none; }
.gallery-load-more {
    background: none; border: 1px solid var(--accent); color: var(--accent);
    font-family: var(--font); letter-spacing: .14em; text-transform: uppercase; font-size: .78rem;
    padding: .75rem 2rem; border-radius: 2px; cursor: pointer; transition: background .2s, color .2s;
}
.gallery-load-more:hover { background: var(--accent); color: var(--black); }

/* --- Reels section ----------------------------------------- */
.reels-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 280px));
    gap: var(--gap); align-items: start; justify-content: center;
}
.reel-card {
    position: relative; aspect-ratio: 9 / 16; background: #000;
    border: 1px solid rgba(240,236,228,.10); border-radius: 3px; overflow: hidden; cursor: pointer;
}
.reel-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-mute {
    position: absolute; bottom: 8px; right: 8px; z-index: 2; width: 34px; height: 34px;
    border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
    font-size: 15px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.reel-mute:hover { background: rgba(0,0,0,.85); }

/* --- Single landscape video block ----------------------------- */
.v2-video { margin: 0 auto; }
.v2-video--full   { max-width: 100%; }
.v2-video--wide   { max-width: 920px; }
.v2-video--medium { max-width: 600px; }
/* landscape override of the (portrait) reel-card the frontend JS drives.
   Card shrink-wraps the video and caps its height so "Full width" can't
   dominate big screens; Wide (517px) & Medium (337px) sit under the cap
   and are unaffected. Change --v2-video-max-h to adjust the ceiling. */
.reel-card.video-card {
    aspect-ratio: auto; cursor: default;
    width: fit-content; max-width: 100%; margin: 0 auto;
}
.reel-card.video-card video {
    position: static; display: block; margin: 0 auto;
    width: auto; height: auto;
    max-width: 100%; max-height: var(--v2-video-max-h, 600px);
    object-fit: contain;
}
.v2-video figcaption {
    text-align: center; color: var(--grey); font-size: .85rem; font-style: italic; margin-top: .7rem;
}

/* --- Booking availability block -------------------------------- */
.avail-strip { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.avail-pill {
    display: flex; flex-direction: column; gap: .1rem; text-decoration: none; color: var(--white);
    border: 1px solid rgba(240,236,228,.16); border-radius: 8px; padding: .6rem .9rem; transition: .15s; min-width: 120px;
}
.avail-pill:hover { border-color: var(--accent); background: rgba(201,168,76,.06); }
.avail-pill b { font-size: .92rem; }
.avail-pill span { font-size: .74rem; color: var(--grey); }
.avail-cal { max-width: 460px; margin: 0 auto; }
.avail-dow, .avail-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.avail-dow span { text-align: center; color: var(--grey); font-size: .68rem; text-transform: uppercase; padding-bottom: .3rem; }
.avail-cell {
    aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 1px solid rgba(240,236,228,.10); border-radius: 4px; font-size: .82rem; color: var(--white); text-decoration: none;
}
.avail-cell.out { border-color: transparent; }
.avail-cell.past { color: rgba(240,236,228,.25); }
.avail-cell.full { color: var(--grey); }
.avail-cell.open { background: rgba(127,174,106,.16); border-color: rgba(127,174,106,.5); color: #cfe6c3; font-weight: 600; }
.avail-cell.open:hover { background: rgba(127,174,106,.3); }
.avail-cell .av-n { font-size: .58rem; color: #9ccf87; line-height: 1; }
.avail-legend { text-align: center; color: var(--grey); font-size: .78rem; margin-top: .8rem; }
.avail-legend .lg { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; vertical-align: -1px; }
.avail-legend .lg.open { background: rgba(127,174,106,.5); }
.avail-legend .lg.full { border: 1px solid rgba(240,236,228,.2); }
.avail-summary { text-align: center; color: var(--grey); font-size: .9rem; margin-top: 1.2rem; }
.avail-summary strong { color: var(--white); }

/* --- Call to action block -------------------------------------- */
.v2-cta { position: relative; padding: clamp(3rem,7vw,5.5rem) 1.2rem; text-align: center; overflow: hidden; background: #111; }
.v2-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-cta-ov { position: absolute; inset: 0; background: rgba(10,10,10,.6); }
.v2-cta-inner { position: relative; max-width: 720px; margin: 0 auto; }
.v2-cta-inner h2 { font-size: clamp(1.8rem,4vw,2.8rem); font-weight: normal; letter-spacing: .02em; }
.v2-cta-inner p { color: rgba(240,236,228,.85); margin: .8rem 0 1.4rem; }

/* --- FAQ block ------------------------------------------------- */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(240,236,228,.12); }
.faq-item summary {
    cursor: pointer; list-style: none; padding: 1rem .2rem; font-size: 1.05rem; position: relative; padding-right: 2rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 1.3rem; }
.faq-item[open] summary::after { content: '\2013'; }
.faq-a { padding: 0 .2rem 1.1rem; color: rgba(240,236,228,.8); font-size: .95rem; }

/* --- Contact form block ---------------------------------------- */
.v2-cform-wrap { max-width: 640px; }
.v2-cform { display: flex; flex-direction: column; gap: .7rem; }
.v2-cform .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 520px) { .v2-cform .cf-row { grid-template-columns: 1fr; } }
.v2-cform input, .v2-cform textarea {
    width: 100%; background: #111; border: 1px solid rgba(240,236,228,.16); color: var(--white);
    font-family: var(--font); font-size: 1rem; padding: .7rem .8rem; border-radius: 3px;
}
.v2-cform textarea { min-height: 120px; resize: vertical; }
.v2-cform .btn { align-self: flex-start; cursor: pointer; }
.v2-cform .cf-status { text-align: center; padding: .6rem; border-radius: 3px; }
.v2-cform .cf-status.ok { color: #9ccf87; }
.v2-cform .cf-status.err { color: #cf6b5a; }

/* --- Instagram strip ------------------------------------------- */
.ig-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: .5rem; }
.ig-cell { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 3px; display: block; }
.ig-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s; }
.ig-cell:hover img { transform: scale(1.06); filter: brightness(.7); }
.ig-cell .ig-ic { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0; transition: .3s; font-size: 1.4rem; }
.ig-cell:hover .ig-ic { opacity: 1; }

/* --- Map block ------------------------------------------------- */
.v2-map { border: 1px solid rgba(240,236,228,.12); border-radius: 4px; overflow: hidden; }
.v2-map iframe { display: block; filter: grayscale(.35); }

/* --- Logos / "as seen in" row ---------------------------------- */
.logos-heading { text-align: center; color: var(--grey); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1.2rem; }
.logos-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.4rem,4vw,3rem); }
.logos-row .logo-cell { display: block; }
.logos-row .logo-cell img { height: 48px; width: auto; max-width: 160px; object-fit: contain; opacity: .6; filter: grayscale(1); transition: .25s; }
.logos-row a.logo-cell:hover img { opacity: 1; filter: grayscale(0); }

/* --- Pricing cards: cap width so 1–2 cards don't stretch wide --- */
.pricing-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
    justify-content: center;
}

/* --- Testimonials ------------------------------------------ */
.tmony-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gap); margin-top: 2rem;
}
.tmony {
    margin: 0; border: 1px solid rgba(240,236,228,.12); border-radius: 3px;
    padding: 1.8rem 1.6rem; background: rgba(255,255,255,.015);
}
.tmony-photos { display: flex; gap: .6rem; margin-bottom: 1.1rem; }
.tmony-photos .gallery-item { width: 76px; height: 76px; border-radius: 4px; overflow: hidden; cursor: zoom-in; flex: 0 0 auto; }
.tmony-photos .gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.tmony blockquote {
    font-style: italic; font-size: 1.05rem; line-height: 1.7; color: var(--white); opacity: .92;
}
.tmony figcaption {
    margin-top: 1rem; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.tmony figcaption span { color: var(--grey); text-transform: none; letter-spacing: .02em; }

/* --- Newsletter / lead capture ----------------------------- */
.nl-box {
    max-width: 560px; margin: 0 auto; text-align: center;
    border: 1px solid var(--accent); border-radius: 3px; padding: 2rem 1.6rem;
    background: linear-gradient(180deg, rgba(201,168,76,.07), rgba(201,168,76,.02));
}
.nl-eyebrow {
    font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem;
}
.nl-form { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.nl-form input {
    flex: 2; min-width: 170px; padding: .7rem .9rem; background: #161616;
    border: 1px solid rgba(240,236,228,.12); color: var(--white); font-family: var(--font);
    font-size: .95rem; border-radius: 2px;
}
.nl-form input[name="nl_social"] { flex: 1; min-width: 130px; }
.nl-form button {
    padding: .7rem 1.6rem; background: none; border: 1px solid var(--accent); color: var(--accent);
    font-family: var(--font); letter-spacing: .1em; text-transform: uppercase; font-size: .78rem;
    cursor: pointer; border-radius: 2px; transition: background .2s, color .2s;
}
.nl-form button:hover { background: var(--accent); color: var(--black); }
.nl-fine { font-size: .72rem; color: var(--grey); font-style: italic; margin-top: .7rem; }

/* --- Offer cards ------------------------------------------- */
.offer-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--gap); margin-top: 2rem;
}
.offer-card {
    position: relative; border: 1px solid rgba(240,236,228,.12);
    background: linear-gradient(180deg, rgba(201,168,76,.06), rgba(201,168,76,.01));
    border-radius: 3px; padding: 2rem 1.5rem; text-align: center;
}
.offer-card h3 { font-weight: normal; font-size: 1.25rem; margin-bottom: .6rem; }
.offer-card p { color: var(--white); opacity: .82; font-size: .95rem; margin-bottom: 1.2rem; }
.offer-badge {
    display: inline-block; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
    padding: .25rem .7rem; margin-bottom: 1rem;
}