/* ============================================================
   7702 VICHY GINGHAM — New Collection Landing Page
   High-end editorial styling (serif display, generous whitespace)
   Loads after style.css; reuses site chrome (header/footer/btn)
   ============================================================ */

/* ---------- Serif display type ---------- */
.gng-serif {
    font-family: Georgia, 'Times New Roman', 'Songti SC', serif;
    font-weight: 400;
}

/* ---------- Hero ---------- */
.gng-hero {
    margin-top: 77px;
    min-height: 86vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: var(--black);
}
.gng-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: url('../images/gingham/gingham_hero.webp') center/cover no-repeat;
    opacity: 0.52;
}
.gng-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(26,26,26,0.72) 0%, rgba(26,26,26,0.28) 55%, rgba(26,26,26,0.12) 100%);
}
.gng-hero .hero-content { position: relative; z-index: 2; }
.gng-hero .kicker {
    color: var(--gold); font-size: 12px; font-weight: 600;
    letter-spacing: 5px; text-transform: uppercase; margin-bottom: 20px;
}
.gng-hero h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 58px; font-weight: 400; color: #fff;
    letter-spacing: 1px; line-height: 1.22; margin-bottom: 26px;
}
.gng-hero h1 strong { font-weight: 700; display: block; }
.gng-hero p {
    font-size: 16.5px; color: rgba(255,255,255,0.82);
    max-width: 580px; line-height: 1.9; margin-bottom: 40px; font-weight: 300;
}
.gng-hero .gng-hero-note {
    display: flex; gap: 34px; margin-bottom: 44px; flex-wrap: wrap;
}
.gng-hero .gng-hero-note div { color: #fff; }
.gng-hero .gng-hero-note .n { font-size: 26px; font-weight: 700; color: var(--gold); font-family: Georgia, serif; }
.gng-hero .gng-hero-note .l { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-top: 4px; }

/* ---------- Section rhythm ---------- */
.gng-section { padding: 110px 0; }
.gng-section.alt { background: var(--gray-light); }
.gng-lede { text-align: center; max-width: 760px; margin: 0 auto 70px; }
.gng-lede .kicker {
    color: var(--gold); font-size: 12px; font-weight: 600;
    letter-spacing: 4px; text-transform: uppercase;
}
.gng-lede h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 38px; font-weight: 400; letter-spacing: 1px; margin-top: 12px; line-height: 1.3;
}
.gng-lede h2 strong { font-weight: 700; }
.gng-lede p { color: var(--gray); font-size: 15.5px; line-height: 1.95; margin-top: 18px; }

/* ---------- Intro split ---------- */
.gng-intro {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center;
}
.gng-intro .gng-photo img { width: 100%; display: block; }
.gng-intro .gng-photo { position: relative; padding: 14px; background: #fff; border: 1px solid var(--border); }
.gng-intro .gng-copy h3 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 30px; font-weight: 400; letter-spacing: 0.5px; line-height: 1.35; margin-bottom: 22px;
}
.gng-intro .gng-copy p { color: var(--gray); font-size: 15px; line-height: 2; margin-bottom: 18px; }
.gng-intro .gng-copy .gng-rule { width: 56px; height: 2px; background: var(--gold); margin: 30px 0; }
.gng-intro .gng-copy .gng-mini { display: flex; gap: 40px; flex-wrap: wrap; }
.gng-intro .gng-copy .gng-mini .n { font-size: 24px; font-weight: 700; color: var(--gold); font-family: Georgia, serif; }
.gng-intro .gng-copy .gng-mini .l { font-size: 11px; color: #999; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 3px; }

/* ---------- Check-size groups ---------- */
.gng-group { padding: 96px 0; }
.gng-group.alt { background: var(--gray-light); }
.gng-group-grid {
    display: grid; grid-template-columns: 1fr 1.15fr; gap: 76px; align-items: center;
}
.gng-group-grid.rev { grid-template-columns: 1.15fr 1fr; }
.gng-group-grid.rev .gng-card-col { order: 2; }
.gng-group-grid.rev .gng-copy-col { order: 1; }

.gng-card-col figure { margin: 0; }
.gng-card-col img { width: 100%; display: block; }
.gng-card-col .gng-frame {
    background: #fff; border: 1px solid var(--border); padding: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.07);
}
.gng-card-col figcaption {
    margin-top: 14px; font-size: 12px; color: #999; letter-spacing: 1px;
    text-align: center; text-transform: uppercase;
}

.gng-copy-col .gng-code {
    color: var(--gold); font-size: 12px; font-weight: 600;
    letter-spacing: 4px; text-transform: uppercase; margin-bottom: 14px;
}
.gng-copy-col h3 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 34px; font-weight: 400; letter-spacing: 0.5px; margin-bottom: 6px;
}
.gng-copy-col .gng-sub {
    font-size: 13px; color: #999; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 24px;
}
.gng-copy-col p { color: var(--gray); font-size: 15px; line-height: 2; margin-bottom: 16px; max-width: 520px; }

.gng-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 34px; max-width: 540px; }
.gng-chips span {
    font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
    border: 1px solid var(--border); padding: 9px 16px; color: #444; background: #fff;
}
.gng-chips span.gold { border-color: var(--gold); color: var(--gold); font-weight: 600; }

.gng-scene { position: relative; }
.gng-scene img { width: 100%; height: 380px; object-fit: cover; display: block; }
.gng-scene figcaption {
    position: absolute; left: 0; bottom: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.62), transparent);
    color: #fff; font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase;
    padding: 40px 22px 16px;
}

/* G group wide layout */
.gng-group-grid.wide { grid-template-columns: 1fr; gap: 0; }
.gng-wide-flex {
    display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 76px; align-items: center; margin-bottom: 56px;
}
.gng-wide-photo img { width: 100%; height: 460px; object-fit: cover; display: block; }

/* ---------- Application wall ---------- */
.gng-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.gng-wall figure { position: relative; overflow: hidden; margin: 0; }
.gng-wall img { width: 100%; height: 400px; object-fit: cover; display: block; transition: transform 0.6s; }
.gng-wall figure:hover img { transform: scale(1.05); }
.gng-wall figcaption {
    position: absolute; inset: auto 0 0 0;
    background: linear-gradient(to top, rgba(0,0,0,0.66), transparent);
    color: #fff; padding: 46px 24px 20px;
}
.gng-wall figcaption h4 { font-size: 16px; font-weight: 600; letter-spacing: 1px; font-family: Georgia, serif; font-weight: 400; }
.gng-wall figcaption p { font-size: 12.5px; color: rgba(255,255,255,0.75); margin-top: 4px; letter-spacing: 0.5px; }

/* ---------- Spec table (refined) ---------- */
.gng-spec-wrap { max-width: 860px; margin: 0 auto; }
.gng-spec-wrap .spec-table { margin-top: 0; }
.gng-spec-wrap .spec-table th { background: #fff; width: 32%; letter-spacing: 1px; text-transform: uppercase; font-size: 12.5px; color: var(--black); }
.gng-spec-wrap .spec-table td { font-size: 14px; }
.gng-price-note { text-align: center; color: #999; font-size: 12.5px; margin-top: 18px; letter-spacing: 0.5px; }

/* ---------- CTA ---------- */
.gng-cta { background: var(--black); padding: 100px 0; text-align: center; position: relative; overflow: hidden; }
.gng-cta::before {
    content: ''; position: absolute; inset: 0;
    background: url('../images/gingham/gingham_7702_redwhite_open.webp') center/cover no-repeat;
    opacity: 0.12;
}
.gng-cta .inner { position: relative; z-index: 2; }
.gng-cta h2 {
    font-family: Georgia, 'Times New Roman', serif;
    color: #fff; font-size: 36px; font-weight: 400; letter-spacing: 1px;
}
.gng-cta h2 strong { font-weight: 700; }
.gng-cta p { color: rgba(255,255,255,0.7); font-size: 15px; margin: 20px auto 36px; max-width: 580px; line-height: 1.9; }

/* ---------- NEW badge for collection card ---------- */
.gng-new-flag {
    display: inline-block; background: var(--gold); color: #fff;
    font-size: 10.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    padding: 5px 12px; margin-bottom: 12px;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .gng-hero h1 { font-size: 40px; }
    .gng-hero { min-height: 0; padding: 130px 0 90px; }
    .gng-section { padding: 72px 0; }
    .gng-group { padding: 64px 0; }
    .gng-intro { grid-template-columns: 1fr; gap: 44px; }
    .gng-group-grid, .gng-group-grid.rev { grid-template-columns: 1fr; gap: 40px; }
    .gng-group-grid.rev .gng-card-col { order: 1; }
    .gng-group-grid.rev .gng-copy-col { order: 2; }
    .gng-wide-flex { grid-template-columns: 1fr; gap: 36px; }
    .gng-wall { grid-template-columns: repeat(2, 1fr); }
    .gng-lede h2 { font-size: 30px; }
}
@media (max-width: 640px) {
    .gng-hero h1 { font-size: 32px; }
    .gng-wall { grid-template-columns: 1fr; }
    .gng-wall img { height: 340px; }
    .gng-scene img { height: 300px; }
    .gng-chips span { padding: 7px 12px; font-size: 11px; }
}