/**
 * Template #1 -- Bridal & Occasion page styling.
 *
 * Loaded only on the "Bridal & Occasion" page template, ALONGSIDE
 * services-archive.css and packages.css (see inc/enqueue.php) -- this page
 * reuses the existing Service card ( .prss-services-card ) and Package card
 * ( .prss-packages-card / .prss-packages-category__grid ) markup verbatim,
 * so their established visual styling comes from those two stylesheets
 * directly rather than being re-implemented here. This file only styles the
 * sections genuinely new to this page. Uses the existing design tokens from
 * template-tokens.css and mirrors the visual scale/rhythm established in
 * about.css and packages.css (same clamp() paddings, same eyebrow/heading/
 * body treatment, same pill CTA language) so this page reads as part of the
 * same template system. `.prss-cta-control` (the shared base reset) is
 * styled globally in header-footer.css -- only the two contextual CTA
 * classes below (--primary / --secondary) supply this page's actual button
 * appearance.
 *
 * Visual-refinement pass (2026-08-23): surgical spacing/hierarchy polish
 * only -- no markup redesign, no new component system introduced. See the
 * section comments below for what changed and why.
 */

.prss-bridal-section {
  padding-block: clamp(48px, 8vw, 96px);
}

/* Refinement: mobile section padding trimmed from the 48-96px range to a
   36-56px range. At narrow widths clamp(48px,8vw,96px) was permanently
   pinned to its 48px floor (8vw < 48px below ~600px viewports), so all 13
   sections on this content-heavy page carried the same generous desktop-
   scale padding on phones too -- the primary contributor to excessive
   mobile scroll length. Desktop spacing (min-width:601px, outside this
   query) is completely untouched. */
@media (max-width: 600px) {
  .prss-bridal-section {
    padding-block: clamp(36px, 9vw, 56px);
  }
}

.prss-bridal-inner {
  max-width: 1260px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

.prss-bridal-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-block-end: 0.9em;
}

.prss-bridal-heading {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-semibold);
  color: var(--color-text);
  line-height: 1.18;
  margin: 0 0 0.5em 0;
}

.prss-bridal-heading--h1 {
  font-size: clamp(2.4rem, 4.8vw, 3.85rem);
  max-width: 20ch;
}

.prss-bridal-heading--h2 {
  font-size: clamp(1.75rem, 3.1vw, 2.45rem);
  margin-block-end: 0.55em;
}

.prss-bridal-heading--h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-medium);
  font-size: clamp(1.22rem, 2vw, 1.5rem);
  color: var(--color-text);
  margin: 0 0 0.45em 0;
}

.prss-bridal-body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-regular);
  color: var(--color-muted);
  font-size: 1.08rem;
  line-height: 1.75;
  margin: 0 0 1.1em 0;
}

.prss-bridal-body:last-child {
  margin-block-end: 0;
}

/* ---------------------------------------------------------------------
 * Shared CTA appearance (contextual classes -- .prss-cta-control itself
 * is only a reset, styled globally in header-footer.css).
 * ------------------------------------------------------------------- */

.prss-bridal-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.92rem;
  text-decoration: none !important;
  padding: 0.85em 1.8em;
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.prss-bridal-cta--primary {
  color: var(--color-surface) !important;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.prss-bridal-cta--primary:hover,
.prss-bridal-cta--primary:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.prss-bridal-cta--secondary {
  color: var(--color-text) !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.prss-bridal-cta--secondary:hover,
.prss-bridal-cta--secondary:focus-visible {
  color: var(--color-whatsapp-dark) !important;
  border-color: var(--color-whatsapp);
}

.prss-bridal-cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------- */

.prss-bridal-hero {
  background: var(--color-background);
  padding-block-end: clamp(36px, 5vw, 64px);
}

.prss-bridal-hero__intro {
  max-width: 62ch;
  margin-block-start: 1.1em;
}

.prss-bridal-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-block-start: 2em;
}

/* ---------------------------------------------------------------------
 * Bridal vs Occasion split
 * ------------------------------------------------------------------- */

.prss-bridal-split {
  border-top: 1px solid var(--color-border);
}

.prss-bridal-split__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 4vw, 56px);
  margin-block-start: clamp(20px, 2.5vw, 32px);
}

.prss-bridal-split__column {
  border-inline-start: 1px solid var(--color-border);
  padding-inline-start: clamp(20px, 2.2vw, 28px);
}

@media (max-width: 700px) {
  .prss-bridal-split__grid {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 32px);
  }
}

/* ---------------------------------------------------------------------
 * Editorial image break
 * ------------------------------------------------------------------- */

.prss-bridal-visual {
  padding-block: 0;
}

.prss-bridal-visual__media {
  width: 100%;
}

.prss-bridal-visual__media img {
  display: block;
  width: 100%;
  height: clamp(340px, 42vw, 620px);
  object-fit: cover;
}

/* ---------------------------------------------------------------------
 * Existing Bridal & Occasion services -- reuses .prss-services-card from
 * services-archive.css (enqueued alongside this file); only the grid
 * wrapper is defined here.
 * ------------------------------------------------------------------- */

.prss-bridal-services {
  border-top: 1px solid var(--color-border);
}

.prss-bridal-services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.2vw, 28px);
  margin-block-start: clamp(24px, 3vw, 32px);
}

@media (max-width: 900px) {
  .prss-bridal-services__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
 * Featured Bridal Experience
 * ------------------------------------------------------------------- */

.prss-bridal-featured {
  border-top: 1px solid var(--color-border);
  background: var(--color-background-alt);
}

.prss-bridal-featured__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}

.prss-bridal-featured__what p {
  margin: 0 0 1.1em 0;
}

.prss-bridal-featured__what p:last-child {
  margin-block-end: 1.1em;
}

.prss-bridal-featured__suitable {
  font-style: italic;
}

.prss-bridal-featured__meta {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--font-body);
  margin-block-end: 1.4em;
}

.prss-bridal-featured__price {
  font-weight: var(--font-weight-body-semibold);
  font-size: 1.1rem;
  color: var(--color-text);
}

.prss-bridal-featured__duration {
  color: var(--color-muted);
}

.prss-bridal-featured__meta-sep {
  color: var(--color-border);
}

/* Refinement: a touch more breathing room between the price/duration row
   and the "View Bridal Experience" CTA, in this content-only column. */
.prss-bridal-featured__content > .prss-bridal-cta {
  margin-block-start: 0.3em;
}

.prss-bridal-featured__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 3px;
}

@media (max-width: 900px) {
  .prss-bridal-featured__grid {
    grid-template-columns: 1fr;
  }

  .prss-bridal-featured__media {
    order: -1;
  }
}

/* ---------------------------------------------------------------------
 * Bridal packages -- reuses .prss-packages-card and
 * .prss-packages-category__grid from packages.css (enqueued alongside
 * this file).
 * ------------------------------------------------------------------- */

.prss-bridal-packages {
  border-top: 1px solid var(--color-border);
}

.prss-bridal-packages__grid {
  margin-block-start: clamp(24px, 3vw, 32px);
}

/* ---------------------------------------------------------------------
 * The Bridal Journey
 *
 * Refinement: desktop gains a restrained connective device -- each step
 * number becomes a small outlined circle, with a thin horizontal rule
 * running behind the row at the circles' vertical center (no icons/
 * illustrations, matching the "very restrained" brief). Mobile switches
 * from a 5-box grid (the reported "too vertically long" layout) to a
 * compact single-column list: the number sits inline to the left of each
 * step's heading/text, with a thin divider between steps instead of a
 * full grid gap -- substantially shorter while keeping every step clearly
 * numbered and readable.
 * ------------------------------------------------------------------- */

.prss-bridal-journey__list {
  list-style: none;
  margin: clamp(28px, 3.2vw, 40px) 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(24px, 3vw, 32px);
  position: relative;
}

.prss-bridal-journey__number {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-medium);
  font-size: clamp(1.5rem, 2vw, 1.8rem);
  color: var(--color-accent-soft);
  margin-block-end: 0.45em;
}

@media (min-width: 901px) {
  .prss-bridal-journey__list::before {
    content: '';
    position: absolute;
    top: 22px;
    inset-inline: 10%;
    height: 1px;
    background: var(--color-border);
    z-index: 0;
  }

  .prss-bridal-journey__step {
    position: relative;
  }

  .prss-bridal-journey__number {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-block-end: 0.7em;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-accent-soft);
    font-size: 1.05rem;
  }
}

@media (max-width: 900px) {
  .prss-bridal-journey__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px clamp(20px, 3vw, 28px);
  }
}

@media (max-width: 480px) {
  .prss-bridal-journey__list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .prss-bridal-journey__step {
    position: relative;
    padding-block: 0.9em;
    padding-inline-start: 2.5em;
  }

  .prss-bridal-journey__step:not(:last-child) {
    border-block-end: 1px solid var(--color-border);
  }

  .prss-bridal-journey__number {
    position: absolute;
    inset-inline-start: 0;
    top: 0.9em;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1;
  }

  .prss-bridal-journey__step .prss-bridal-heading--h3 {
    margin-block-end: 0.3em;
  }

  .prss-bridal-journey__step .prss-bridal-body {
    margin-block-end: 0;
  }
}

/* ---------------------------------------------------------------------
 * Planning your visit -- consolidated "Before your appointment" +
 * "Planning your timing".
 *
 * Refinement: these two sections previously rendered as two independent
 * full-width .prss-bridal-section blocks (each with its own border-top
 * and section padding), reading as disconnected and leaving a large empty
 * right-hand gap on desktop next to the narrow prep list / centered timing
 * paragraph. They now share one section wrapper and become two columns of
 * one balanced two-column layout on desktop, and one visually grouped
 * block (shared background, single border-top, one shared heading rhythm,
 * a subtle divider between the two stacked parts) on mobile -- not two
 * generic bordered cards.
 * ------------------------------------------------------------------- */

.prss-bridal-planning {
  border-top: 1px solid var(--color-border);
  background: var(--color-background-alt);
}

.prss-bridal-planning__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}

.prss-bridal-planning__column.prss-bridal-timing {
  border-inline-start: 1px solid var(--color-border);
  padding-inline-start: clamp(28px, 3.5vw, 48px);
}

@media (max-width: 780px) {
  .prss-bridal-planning__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .prss-bridal-planning__column {
    padding-block: clamp(20px, 5vw, 28px);
  }

  .prss-bridal-planning__column:first-child {
    padding-block-start: 0;
  }

  .prss-bridal-planning__column:last-child {
    padding-block-end: 0;
  }

  .prss-bridal-planning__column.prss-bridal-timing {
    border-inline-start: none;
    padding-inline-start: 0;
    border-block-start: 1px solid var(--color-border);
  }
}

.prss-bridal-prep__list {
  list-style: none;
  margin: clamp(20px, 2.4vw, 28px) 0 0 0;
  padding: 0;
  display: grid;
  gap: 0.65em;
}

.prss-bridal-prep__list li {
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--color-muted);
  line-height: 1.6;
  padding-inline-start: 1.2em;
  position: relative;
}

.prss-bridal-prep__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent-soft);
}

/* Refinement: tighter bullet-to-text and item-to-item spacing on mobile
   specifically (list gap 0.65em -> 0.5em, line-height 1.6 -> 1.55) without
   shrinking the body copy itself or removing the bullets, so touch/
   readability standards are kept while density improves. */
@media (max-width: 600px) {
  .prss-bridal-prep__list {
    gap: 0.5em;
  }

  .prss-bridal-prep__list li {
    line-height: 1.55;
    padding-inline-start: 1.1em;
  }
}

.prss-bridal-timing .prss-bridal-body {
  line-height: 1.75;
}

/* ---------------------------------------------------------------------
 * Riyadh Context
 *
 * Refinement: this section previously read as a single plain paragraph
 * with no distinct presentation, understated against the rich sections
 * above it. It now sits on the shared background-alt tone (matching
 * Featured Experience / Planning / Group Enquiry) with its content held
 * in a bordered, contained panel -- spacing/layout only, no new
 * photography and no content changes.
 * ------------------------------------------------------------------- */

.prss-bridal-riyadh {
  border-top: 1px solid var(--color-border);
  background: var(--color-background-alt);
}

.prss-bridal-riyadh__panel {
  max-width: 760px;
  padding: clamp(28px, 3.6vw, 48px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

.prss-bridal-riyadh .prss-bridal-body {
  max-width: 60ch;
  line-height: 1.8;
}

/* ---------------------------------------------------------------------
 * Guests / Groups
 *
 * Refinement: this commercial callout stays visually distinct from the
 * neighbouring Planning area (different background rhythm is preserved),
 * with a little more vertical presence and a full-width CTA on mobile so
 * the action reads clearly rather than being visually secondary.
 * ------------------------------------------------------------------- */

.prss-bridal-guests {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding-block: clamp(56px, 7vw, 100px);
}

.prss-bridal-guests .prss-bridal-body {
  max-width: 62ch;
  margin-block-end: 1.6em;
}

@media (max-width: 700px) {
  .prss-bridal-guests {
    padding-block: clamp(44px, 10vw, 64px);
  }

  .prss-bridal-guests .prss-bridal-cta {
    width: 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------
 * FAQ -- native <details>/<summary>, no JavaScript required
 * ------------------------------------------------------------------- */

.prss-bridal-faq {
  border-top: 1px solid var(--color-border);
}

.prss-bridal-faq__list {
  margin-block-start: clamp(20px, 2.4vw, 28px);
  max-width: 820px;
}

.prss-bridal-faq__item {
  border-block-end: 1px solid var(--color-border);
}

.prss-bridal-faq__item:first-child {
  border-block-start: 1px solid var(--color-border);
}

.prss-bridal-faq__item .prss-bridal-body {
  margin: 0 0 1.3em 0;
  padding-inline-start: 0.1em;
}

.prss-bridal-faq__question {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-medium);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--color-text);
  padding-block: 1.1em;
}

.prss-bridal-faq__question::-webkit-details-marker {
  display: none;
}

.prss-bridal-faq__question::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--color-accent);
  transition: transform 0.2s ease;
}

.prss-bridal-faq__item[open] .prss-bridal-faq__question::after {
  transform: rotate(45deg);
}

.prss-bridal-faq__question:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .prss-bridal-faq__question {
    padding-block: 1em;
  }
}

/* ---------------------------------------------------------------------
 * Final CTA
 *
 * Refinement: strengthened to feel closer in weight to the Hero -- more
 * vertical padding, a contained background tone that clearly separates it
 * from the FAQ above, and a larger heading -- while keeping the same
 * palette, the same two CTAs, and no structural redesign.
 * ------------------------------------------------------------------- */

.prss-bridal-closing {
  border-top: 1px solid var(--color-border);
  background: var(--color-background-alt);
  padding-block: clamp(64px, 9vw, 120px);
  text-align: center;
}

.prss-bridal-closing .prss-bridal-heading--h2 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  max-width: 18ch;
  margin-inline: auto;
}

.prss-bridal-closing .prss-bridal-body {
  max-width: 54ch;
  margin-inline: auto;
  margin-block-end: 1.8em;
}

.prss-bridal-closing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
}

/* ---------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .prss-bridal-cta,
  .prss-bridal-faq__question::after {
    transition: none;
  }
}