/* ============================================================
   Château de Montfrin — Interior pages
   ============================================================ */

/* ── Placeholder block (shared with home) ── */
.ph {
  position: relative;
  background: linear-gradient(135deg, var(--olive-dark), var(--olive) 55%, #7d8f5c);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ph::after {
  content: attr(data-ph);
  font-family: var(--sans); font-size: .56rem; font-weight: 300;
  letter-spacing: .35em; text-transform: uppercase; color: rgba(255,255,255,.5);
  text-align: center; padding: 1rem;
}
.ph--gold { background: linear-gradient(135deg, #2a2620, #4a3f2a 60%, var(--gold)); }

/* ── Page hero (interior header band) ── */
.page-hero {
  background: var(--charcoal); position: relative; overflow: hidden;
  padding: clamp(9rem, 16vw, 13rem) var(--gutter) clamp(4rem, 8vw, 6rem);
  text-align: center;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(184,149,62,.12), transparent 60%);
}
.page-hero__inner { position: relative; z-index: 1; max-width: 52rem; margin: 0 auto; }
.page-hero .eyebrow { color: var(--gold-light); display: block; margin-bottom: 1.6rem; }
.page-hero h1 {
  font-family: var(--serif); font-weight: 300; letter-spacing: .05em; line-height: 1.2;
  font-size: clamp(2.4rem, 5.5vw, 4rem); color: var(--cream);
}
.page-hero h1 em { font-style: italic; color: var(--gold-light); }
.page-hero .sub {
  font-family: var(--jp); font-weight: 300; font-size: .9rem; line-height: 2.1;
  color: rgba(250,248,244,.55); margin-top: 1.8rem;
}

/* ── Breadcrumb ── */
.breadcrumb { max-width: var(--maxw); margin: 0 auto; padding: 1.6rem var(--gutter) 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; font-size: .66rem; letter-spacing: .12em; color: var(--text-faint); }
.breadcrumb a { color: var(--text-light); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb li::after { content: '/'; margin-left: .6rem; color: var(--line); }
.breadcrumb li:last-child::after { content: ''; }

/* ── Prose ── */
.prose { max-width: 46rem; margin: 0 auto; }
.prose p {
  font-family: var(--jp); font-weight: 300; font-size: 1rem; line-height: 2.4;
  letter-spacing: .03em; color: var(--text); margin-bottom: 1.8rem;
}
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--charcoal); margin: 3rem 0 1.4rem; letter-spacing: .03em; }
.prose h3 { font-family: var(--jp-serif); font-weight: 500; font-size: 1.05rem; color: var(--charcoal); margin: 2.4rem 0 1rem; }

/* ── Section title (centered) ── */
.s-head { text-align: center; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.s-head .eyebrow { display: block; margin-bottom: 1.1rem; }
.s-head h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); }
.s-head .display { line-height: 1.3; }

/* ── Feature row (image + text, alternating) ── */
.feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2.5rem, 6vw, 6rem); }
.feature + .feature { margin-top: clamp(4rem, 9vw, 8rem); }
.feature--rev .feature__media { order: 2; }
.feature__media { aspect-ratio: 4/3; border: 1px solid var(--line); }
.feature__body { max-width: 32rem; }
.feature__body .eyebrow { display: block; margin-bottom: 1.2rem; }
.feature__body h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--charcoal); line-height: 1.4; margin-bottom: 1.4rem; letter-spacing: .03em; }
.feature__body h3 em { font-style: italic; color: var(--olive); }
.feature__body p { font-family: var(--jp); font-weight: 300; font-size: .92rem; line-height: 2.3; color: var(--text-light); }

/* ── Product detail ── */
.pd { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.pd__media { position: sticky; top: 6rem; aspect-ratio: 4/5; background: radial-gradient(ellipse at 50% 40%, var(--gold-pale), var(--cream) 70%); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.pd__media img { width: auto; max-height: 82%; object-fit: contain; }
.pd__body .product__no { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 1rem; margin-bottom: 1rem; }
.pd__body h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--charcoal); letter-spacing: .03em; line-height: 1.25; }
.pd__jp { font-family: var(--jp-serif); font-size: .9rem; font-weight: 300; color: var(--gold); margin: .6rem 0 2rem; letter-spacing: .08em; }
.pd__lead { font-family: var(--jp); font-weight: 300; font-size: .9rem; line-height: 2.3; color: var(--text); margin-bottom: 2.4rem; }
.pd__body p { font-family: var(--jp); font-weight: 300; font-size: .85rem; line-height: 2.3; color: var(--text-light); margin-bottom: 1.6rem; }

/* spec table */
.spec { width: 100%; border-top: 1px solid var(--line); margin: 2.4rem 0; }
.spec tr { border-bottom: 1px solid var(--line); }
.spec th, .spec td { text-align: left; padding: 1rem .4rem; vertical-align: top; font-weight: 300; }
.spec th { font-family: var(--sans); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); width: 38%; padding-top: 1.15rem; }
.spec td { font-family: var(--jp); font-size: .84rem; color: var(--text); }

/* tasting / pairing chips */
.chips { display: flex; flex-wrap: wrap; gap: .7rem; margin: .4rem 0 2rem; }
.chip { font-family: var(--jp); font-size: .74rem; font-weight: 300; color: var(--olive-dark); border: 1px solid var(--line); border-radius: 2rem; padding: .5rem 1.2rem; background: var(--cream); }

/* ── Hub grid (About) ── */
.hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2rem); }
.hub-card { display: block; text-decoration: none; background: var(--white); border: 1px solid var(--line); padding: clamp(2rem, 4vw, 3rem); transition: box-shadow .4s ease, transform .4s ease; }
.hub-card:hover { box-shadow: 0 18px 50px rgba(26,26,24,.07); transform: translateY(-4px); }
.hub-card .hc-no { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: .9rem; margin-bottom: 1rem; }
.hub-card h3 { font-family: var(--jp-serif); font-weight: 500; font-size: 1.15rem; color: var(--charcoal); margin-bottom: 1rem; letter-spacing: .04em; }
.hub-card p { font-family: var(--jp); font-weight: 300; font-size: .82rem; line-height: 2; color: var(--text-light); margin-bottom: 1.4rem; }
.hub-card .txtlink { color: var(--olive); }

/* ── Stats inline (reused) ── */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 4rem); margin: clamp(3rem,6vw,4.5rem) auto 0; max-width: 60rem; }
.stat-row .stat { text-align: center; }
.stat-row .fig { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 5.5vw, 4rem); color: var(--gold); line-height: 1; }
.stat-row .fig small { font-size: .35em; letter-spacing: .1em; }
.stat-row .cap { font-family: var(--jp); font-size: .76rem; font-weight: 300; line-height: 1.9; color: var(--text-light); margin-top: 1.1rem; }

/* ── Awards list ── */
.award-list { max-width: 50rem; margin: 0 auto; }
.award-row { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: baseline; padding: 1.8rem 0; border-bottom: 1px solid var(--line); }
.award-row .yr { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--gold); white-space: nowrap; }
.award-row h3 { font-family: var(--jp-serif); font-weight: 500; font-size: 1rem; color: var(--charcoal); margin-bottom: .4rem; }
.award-row p { font-family: var(--jp); font-weight: 300; font-size: .82rem; line-height: 1.9; color: var(--text-light); }

/* ── Shops list ── */
.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); max-width: 60rem; margin: 0 auto; }
.shop { background: var(--cream); padding: 2rem clamp(1.5rem,3vw,2.4rem); }
.shop h3 { font-family: var(--jp-serif); font-weight: 500; font-size: .98rem; color: var(--charcoal); margin-bottom: .6rem; }
.shop p { font-family: var(--jp); font-weight: 300; font-size: .78rem; line-height: 1.9; color: var(--text-light); }
.shop a { color: var(--gold); text-decoration: none; }

/* ── Gift occasions (reuse home .occasions) ── */
.gift-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem,3vw,2rem); margin-top: clamp(3rem,6vw,4rem); }
.gift-card { border: 1px solid var(--line); background: var(--white); padding: clamp(2rem,4vw,2.8rem); text-align: center; }
.gift-card .gc-ico { width: 60px; height: 60px; border: 1px solid var(--gold-pale); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto 1.4rem; }
.gift-card h3 { font-family: var(--jp-serif); font-weight: 500; font-size: 1rem; color: var(--charcoal); margin-bottom: .8rem; }
.gift-card p { font-family: var(--jp); font-weight: 300; font-size: .8rem; line-height: 2; color: var(--text-light); }

/* ── Forms (order / MailForm Pro) ── */
.form { max-width: 44rem; margin: 0 auto; }
.form-note { font-family: var(--jp); font-size: .8rem; font-weight: 300; line-height: 2; color: var(--text-light); margin-bottom: 2.5rem; text-align: center; }
.field { margin-bottom: 1.8rem; }
.field > label { display: block; font-family: var(--jp); font-size: .82rem; font-weight: 500; color: var(--charcoal); margin-bottom: .7rem; letter-spacing: .04em; }
.field .req { font-size: .6rem; letter-spacing: .15em; color: #b03a3a; margin-left: .6rem; vertical-align: middle; }
.field .opt { font-size: .6rem; letter-spacing: .15em; color: var(--text-faint); margin-left: .6rem; vertical-align: middle; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field textarea, .field select {
  width: 100%; font-family: var(--jp); font-size: .9rem; font-weight: 300; color: var(--text);
  background: var(--white); border: 1px solid var(--line); padding: .95rem 1.1rem;
  transition: border-color .3s ease;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); }
.field textarea { resize: vertical; min-height: 9rem; }
.field .hint { font-family: var(--jp); font-size: .72rem; font-weight: 300; color: var(--text-faint); margin-top: .5rem; line-height: 1.7; }
.field-inline { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.choice { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--jp); font-size: .85rem; font-weight: 300; color: var(--text); }
.form-actions { text-align: center; margin-top: 2.5rem; }
.form-actions .btn { cursor: pointer; font-family: var(--sans); }

/* ── Closing CTA reused ── */
.cta-band { text-align: center; background: var(--cream-dark); }
.cta-band h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-bottom: 1.4rem; }
.cta-band p { font-family: var(--jp); font-size: .84rem; font-weight: 300; line-height: 2.2; color: var(--text-light); margin-bottom: 2.6rem; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .feature, .pd { grid-template-columns: 1fr; gap: 2.5rem; }
  .feature--rev .feature__media { order: 0; }
  .pd__media { position: static; max-width: 22rem; margin: 0 auto; aspect-ratio: 3/4; }
  .hub-grid, .shop-grid, .gift-grid, .stat-row { grid-template-columns: 1fr; }
  .stat-row { gap: 3rem; }
}