/* =========================================================
   pages.css — Gallery, Pricing and About
   These three pages are shared between both businesses, so
   each one holds two panels that keep their own side's visual
   treatment. A sticky switcher shows one at a time: arriving
   from the wedding navigation opens the wedding panel, and a
   bride never scrolls into EPC rates by accident.
   ========================================================= */

/* ---------- Interior page header ---------- */
.page-head {
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--bg);
  text-align: center;
}
.page-head h1 { max-width: 16ch; margin-inline: auto; }
.page-head p { max-width: 52ch; margin: 1.75rem auto 0; color: var(--fg-muted); }

/* ---------- Dual-panel switcher ---------- */
.dual__switch {
  position: sticky;
  top: 84px;
  z-index: 80;
  display: flex;
  justify-content: center;
  padding-block: 1.25rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block: 1px solid var(--line-soft);
}
@supports not (backdrop-filter: blur(1px)) {
  .dual__switch { background: var(--bg); }
}
@media (max-width: 860px) { .dual__switch { top: 76px; } }

.switch { display: inline-flex; border: 1px solid var(--line); }
.switch__btn {
  padding: .9375rem clamp(1.25rem, 4vw, 2.75rem);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: background .45s var(--ease), color .45s var(--ease);
}
.switch__btn + .switch__btn { border-left: 1px solid var(--line); }
.switch__btn:hover { color: var(--fg); }
/* Inverted against whichever theme is active, so the selected tab
   reads clearly on the light wedding panel and the dark property
   panel alike. */
.switch__btn[aria-selected="true"] { background: var(--btn-bg); color: var(--btn-fg); }
.switch__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Each panel carries its own theme, so the two halves of the
   page look like they belong to different companies. */
.dual__panel { padding-block: var(--section-y); background: var(--bg); color: var(--fg); }
.dual__panel[hidden] { display: none; }

/* Without JS both panels stay visible and stacked. This rule
   gives them a hard edge so the separation still reads. */
.dual__panel + .dual__panel { border-top: 1px solid var(--line); }

.panel-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.panel-head h2 { max-width: 18ch; }
.panel-head p { max-width: 50ch; margin-top: 1.5rem; color: var(--fg-muted); }

/* ---------- Gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.75rem, 1.6vw, 1.5rem);
}
.gallery__item { grid-column: span 4; }
/* An editorial rhythm rather than a uniform grid — a few
   images breathe wider so the page does not read as a
   contact sheet. */
.gallery__item:nth-child(6n + 1) { grid-column: span 6; }
.gallery__item:nth-child(6n + 2) { grid-column: span 6; }
.gallery__item:nth-child(6n + 6) { grid-column: span 8; }
.gallery__item:nth-child(6n + 5) { grid-column: span 4; }
@media (max-width: 900px) {
  .gallery__item,
  .gallery__item:nth-child(6n + 1),
  .gallery__item:nth-child(6n + 2),
  .gallery__item:nth-child(6n + 5),
  .gallery__item:nth-child(6n + 6) { grid-column: span 6; }
}
@media (max-width: 560px) {
  .gallery__item,
  .gallery__item:nth-child(6n + 1),
  .gallery__item:nth-child(6n + 2),
  .gallery__item:nth-child(6n + 5),
  .gallery__item:nth-child(6n + 6) { grid-column: span 12; }
}

.gallery__item figcaption {
  margin-top: .875rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ---------- Pricing: wedding packages ---------- */
.packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.package {
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 3.5vw, 3rem);
  background: var(--bg-alt);
  border: 1px solid transparent;
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.package:hover { transform: translateY(-4px); border-color: var(--accent-soft); }
.package--featured { background: var(--charcoal); color: var(--ivory); }
.package--featured h3, .package--featured .package__price { color: var(--ivory); }
.package--featured .package__list li { color: rgba(247,245,242,.72); }
.package--featured .package__list li::before { background: var(--taupe); }
.package--featured .btn { background: var(--ivory); color: var(--charcoal); }

.package__flag {
  align-self: flex-start;
  margin-bottom: 1.5rem;
  padding: .375rem .75rem;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--taupe);
  color: var(--charcoal);
}
.package h3 { font-size: 1.75rem; margin-bottom: .5rem; }
.package__tagline { font-size: 0.875rem; color: var(--fg-muted); margin-bottom: 2rem; }
.package--featured .package__tagline { color: rgba(247,245,242,.62); }
/* The featured card inverts to charcoal, but these two inherit the light
   theme's muted tones and disappear against it. */
.package--featured .package__from { color: rgba(247,245,242,.5); }
.package__price {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
  line-height: 1;
  margin-bottom: .5rem;
}

/* "From" sits alongside every figure on the site — nothing here is a
   fixed quote, and a small marker is less shouty than repeating the word
   at full size next to each price. */
.price-from {
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-right: .4rem;
  vertical-align: middle;
}
.package__price .price-from { display: block; margin-bottom: .625rem; }
.package--featured .price-from { color: var(--taupe); }
.addon__price .price-from { display: block; margin-bottom: .5rem; }
.rate-card .price-from { display: inline; margin-right: .3rem; }
.package__price sup { font-size: .4em; vertical-align: super; letter-spacing: .1em; }
.package__from {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 2rem;
}
.package__list { flex: 1; margin-bottom: 2.5rem; }
.package__list li {
  position: relative;
  padding-left: 1.375rem;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--fg-muted);
}
.package__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .95em;
  width: 8px; height: 1px;
  background: var(--accent);
}

/* ---------- Pricing: property rate card ---------- */
.rate-card { border: 1px solid var(--line); overflow-x: auto; }
.rate-card table { min-width: 640px; }
.rate-card caption {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  text-align: left;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  border-bottom: 1px solid var(--line);
}
.rate-card th, .rate-card td {
  padding: 1.125rem clamp(1rem, 2.2vw, 1.75rem);
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.rate-card thead th {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  border-bottom: 1px solid var(--line);
}
.rate-card tbody th { font-weight: 500; font-size: 0.9375rem; color: var(--fg); }
.rate-card td { font-size: 0.9375rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.rate-card td.price { color: var(--ivory); font-weight: 500; }
.rate-card tbody tr:last-child th,
.rate-card tbody tr:last-child td { border-bottom: 0; }
.rate-card tbody tr { transition: background .35s var(--ease); }
.rate-card tbody tr:hover { background: var(--bg-alt); }

.addons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.addon {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.addon__price {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--ivory);
  margin-bottom: .75rem;
}
.addon h3 { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; letter-spacing: .04em; margin-bottom: .375rem; }
.addon p { font-size: 0.8125rem; color: var(--fg-muted); }

.pricing-note {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--fg-faint);
  max-width: 68ch;
  line-height: 1.75;
}

/* ---------- About ---------- */
.about-hero {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
@media (max-width: 900px) { .about-hero { grid-template-columns: 1fr; } }
.about-hero__body p + p { margin-top: 1.25rem; }
.about-hero__body p { color: var(--fg-muted); }

.about-signature {
  margin-top: 2.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.75rem;
  color: var(--accent);
}

/* The two-sides explainer: one card per business, each
   tinted toward its own side. */
.about-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 820px) { .about-sides { grid-template-columns: 1fr; } }
.about-side { padding: clamp(2rem, 4vw, 3.25rem); }
.about-side--weddings { background: var(--stone); color: var(--charcoal); }
.about-side--property { background: var(--black); color: var(--ivory); }
.about-side__eyebrow {
  display: block;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.about-side--weddings .about-side__eyebrow { color: #A88B76; }
.about-side--property .about-side__eyebrow { color: var(--taupe); }
.about-side h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 1rem; }
.about-side p { margin-bottom: 2rem; font-size: 0.9375rem; }
.about-side--weddings p { color: rgba(43,43,43,.7); }
.about-side--property p { color: rgba(247,245,242,.62); }
.about-side--weddings .link-under { color: var(--charcoal); border-color: rgba(43,43,43,.2); }
.about-side--property .link-under { color: var(--ivory); border-color: rgba(247,245,242,.24); }

.credentials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.credential { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.credential h3 { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; letter-spacing: .04em; margin-bottom: .5rem; }
.credential p { font-size: 0.8125rem; color: var(--fg-muted); }

/* ---------- Shared closing CTA ---------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band p { max-width: 46ch; margin: 1.5rem auto 2.5rem; color: var(--fg-muted); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }