/**
 * Template #1 — Homepage-only styling.
 *
 * Loaded only on the front page. Consumes the existing design tokens from
 * template-tokens.css (--color-*, --font-*) rather than defining a competing
 * palette.
 *
 * IMPORTANT (fixed in Prompt #7A): the Hero/Bridal split layout is driven by
 * Elementor's own native flex container system (flex_direction/flex_gap set
 * directly in the Elementor document), NOT CSS grid — an earlier `display:
 * grid` rule here was silently losing to Elementor's own `.e-con` flex
 * display, which is why the two-column proportions never applied. Column
 * width is now set via Elementor's own --container-widget-flex-grow custom
 * property, targeted through the _css_classes/css_classes added to specific
 * widgets/containers in the Elementor document.
 */

/* ---------------------------------------------------------------------
 * Shared section rhythm
 * ------------------------------------------------------------------- */

.prss-home-section {
  padding-block: clamp(56px, 8vw, 120px);
}

/* AUTHORITATIVE HOMEPAGE SHELL.
 *
 * This single wrapper controls the horizontal position of ALL homepage
 * content. Section backgrounds stay full-width while their inner content
 * shares one set of centered left/right boundaries.
 *
 * WHY THE .elementor PREFIX AND EXPLICIT WIDTH ARE BOTH REQUIRED: each of
 * these wrappers is also an Elementor container, and Elementor's own base
 * rule ".e-con { width: var(--width) }" (--width:100%) has the SAME
 * single-class specificity (0,1,0) as a bare ".prss-home-inner" rule, so
 * whichever stylesheet loads later wins. When Elementor's frontend CSS
 * loads after this file the shell silently reverts to full width, leaving
 * its max-width/auto-margins nothing to center -- the left-anchored
 * composition. The ".elementor" prefix raises this to 0,2,0 so it wins
 * deterministically regardless of load order (no !important needed), and
 * the explicit width makes the shell self-governing rather than dependent
 * on whatever width the Astra/Elementor parent chain supplies.
 */
.elementor .prss-home-inner {
  width: min(calc(100% - 2 * clamp(20px, 5vw, 56px)), 1260px);
  max-width: 1260px;
  margin-inline: auto;
  padding-inline: 0;
}

.elementor .prss-home-copy {
  max-width: 64ch;
}

.prss-home-eyebrow,
.prss-w-eyebrow .elementor-heading-title {
  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-home-heading,
.prss-w-heading .elementor-heading-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-semibold);
  color: var(--color-text);
  line-height: 1.15;
  margin: 0 0 0.5em 0;
}

.prss-home-heading--h1,
.prss-w-h1 .elementor-heading-title {
  font-size: clamp(2.3rem, 4.8vw, 3.9rem);
}

.prss-home-heading--h2,
.prss-w-h2 .elementor-heading-title {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
}

.prss-home-heading--h3 {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
}

.prss-home-body,
.prss-w-body p {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-regular);
  color: var(--color-muted);
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Links/buttons: Astra's own (unconfigured) global link color leaks a bright
   blue + underline into these project components because its own `a` rule
   carries more contextual specificity than a single project class. These
   are scoped, intentional overrides for just these homepage components —
   not a sitewide change — so !important is used deliberately here. */
.prss-home-cta,
.elementor .prss-w-cta .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 1rem;
  text-decoration: none !important;
  border-radius: 2px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.prss-home-cta--primary,
.elementor .prss-w-cta--primary .elementor-button {
  padding: 0.95em 1.8em;
  background: var(--color-primary);
  color: var(--color-surface) !important;
  border: 1px solid var(--color-primary);
}

.prss-home-cta--primary:hover,
.prss-home-cta--primary:focus-visible,
.elementor .prss-w-cta--primary .elementor-button:hover,
.elementor .prss-w-cta--primary .elementor-button:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-surface) !important;
}

/* Correction pass: previously an underlined text link -- did not read as a
   clickable button next to the filled primary. Now a clearly-bordered
   outline button, matching the primary's padding/sizing for visual parity,
   inverting to a filled state on hover/focus so the affordance is obvious
   without making the two actions look identical. */
.prss-home-cta--secondary,
.elementor .prss-w-cta--secondary .elementor-button {
  padding: 0.95em 1.8em;
  background: transparent;
  color: var(--color-text) !important;
  border: 1.5px solid var(--color-primary);
}

.prss-home-cta--secondary:hover,
.prss-home-cta--secondary:focus-visible,
.elementor .prss-w-cta--secondary .elementor-button:hover,
.elementor .prss-w-cta--secondary .elementor-button:focus-visible {
  background: var(--color-primary);
  color: var(--color-surface) !important;
  border-color: var(--color-primary);
}

.prss-home-cta:focus-visible,
.elementor .prss-w-cta .elementor-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

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

.prss-home-hero {
  background: var(--color-background);
}

/* Vertical editorial hero (superseding the earlier split layout): copy
   block on top, full-width photograph beneath, both stacked in the same
   container -- flex_direction is now "column" on every breakpoint at the
   Elementor level (not just mobile/tablet), and flex_align_items:"stretch"
   is what makes the visual widget span the full container width instead of
   needing an explicit width rule here. The old 44/56 flex-grow split no
   longer applies to anything in a column-direction flex container, so it
   has been removed rather than left as dead code. */
.prss-home-hero__grid {
  gap: clamp(28px, 4vw, 40px);
}

.elementor .prss-home-hero__text {
  max-width: 62ch;
}

.elementor .prss-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  margin-block-start: 1.7em;
}

.elementor .prss-home-hero__visual {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-background-alt) 0%, var(--color-surface) 100%);
}

.elementor .prss-home-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .elementor .prss-home-hero__visual {
    aspect-ratio: 4 / 5;
    max-width: none;
    /* Full-bleed on mobile (kept from the prior layout): break out of the
       shared inner gutter so the image reaches the true screen edges. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
  }
}

/* ---------------------------------------------------------------------
 * Service category cards
 * ------------------------------------------------------------------- */

.prss-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  margin-block-start: clamp(28px, 4vw, 44px);
}

.prss-category-card {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  background: var(--color-surface);
  padding: clamp(20px, 2.6vw, 30px);
  text-decoration: none !important;
  transition: background-color 0.2s ease;
}

.prss-category-card:hover,
.prss-category-card:focus-visible {
  background: var(--color-background-alt);
}

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

.prss-category-card__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-medium);
  font-size: 1.3rem;
  color: var(--color-text) !important;
  text-decoration: none !important;
}

.prss-category-card__desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-muted) !important;
  text-decoration: none !important;
}

.prss-category-card__arrow {
  margin-block-start: auto;
  color: var(--color-accent) !important;
  font-size: 1.1rem;
  text-decoration: none !important;
  transition: transform 0.2s ease;
}

.prss-category-card:hover .prss-category-card__arrow,
.prss-category-card:focus-visible .prss-category-card__arrow {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .prss-category-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .prss-category-grid { grid-template-columns: 1fr; }

  .prss-category-card {
    padding: 16px 20px;
    gap: 0.35em;
  }

  .prss-category-card__name {
    font-size: 1.15rem;
  }
}

/* ---------------------------------------------------------------------
 * Featured service cards
 * ------------------------------------------------------------------- */

.prss-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  margin-block-start: clamp(28px, 4vw, 44px);
}

.prss-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: clamp(24px, 2.8vw, 32px);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.prss-service-card:hover {
  border-color: var(--color-accent-soft);
  transform: translateY(-2px);
}

.prss-service-card__badge {
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-accent-soft);
  border-radius: 2px;
  padding: 0.3em 0.7em;
  margin-block-end: 0.9em;
}

.prss-service-card__category {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-medium);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-soft);
  margin-block-end: 0.6em;
}

.prss-service-card__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-medium);
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 0 0 0.5em 0;
}

.prss-service-card__title a {
  color: var(--color-text) !important;
  text-decoration: none !important;
}

.prss-service-card__title a:hover,
.prss-service-card__title a:focus-visible {
  color: var(--color-accent) !important;
}

.prss-service-card__desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0 0 1.1em 0;
  flex-grow: 1;
}

.prss-service-card__meta {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  font-family: var(--font-body);
  font-size: 0.92rem;
  margin-block-end: 1em;
  flex-wrap: wrap;
}

.prss-service-card__price {
  font-weight: var(--font-weight-body-semibold);
  color: var(--color-text);
}

.prss-service-card__duration {
  color: var(--color-muted);
}

.prss-service-card__meta-sep {
  color: var(--color-border);
}

.prss-service-card__link {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.9rem;
  color: var(--color-primary) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.prss-service-card__link:hover,
.prss-service-card__link:focus-visible {
  color: var(--color-accent) !important;
}

.prss-service-card a:focus-visible,
.prss-service-card__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .prss-featured-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .prss-featured-grid { grid-template-columns: 1fr; }

  .prss-service-card {
    padding: 20px 22px;
  }

  .prss-service-card__desc {
    margin-block-end: 0.8em;
  }

  .prss-service-card__meta {
    margin-block-end: 0.8em;
  }
}

/* ---------------------------------------------------------------------
 * Signature experience (editorial numbered grid)
 * ------------------------------------------------------------------- */

.prss-home-signature {
  background: var(--color-background-alt);
}

.elementor .prss-signature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 56px);
  margin-block-start: clamp(40px, 5vw, 64px);
}

.elementor .prss-signature-item {
  border-top: 1px solid var(--color-border);
  padding-block-start: 1.6em;
}

.prss-signature-item__number,
.prss-w-signature-number .elementor-heading-title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-medium);
  font-size: 2.8rem;
  color: var(--color-accent-soft);
  line-height: 1;
  margin-block-end: 0.45em;
}

.prss-signature-item__title,
.prss-w-signature-title .elementor-heading-title {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 1.1rem;
  color: var(--color-text);
  margin: 0 0 0.5em 0;
}

.prss-signature-item__text,
.prss-w-signature-text p {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0;
}

@media (max-width: 700px) {
  .elementor .prss-signature-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
 * Bridal & Occasion feature
 * ------------------------------------------------------------------- */

.prss-home-bridal__grid {
  gap: clamp(32px, 5vw, 64px);
}

/* Desktop column balance: ~43% text / ~57% visual. */
.prss-home-bridal__text-widget {
  --container-widget-flex-grow: 0.43 !important;
}

.prss-home-bridal__visual-widget {
  --container-widget-flex-grow: 0.57 !important;
}

.elementor .prss-home-bridal__visual {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(200deg, var(--color-surface) 0%, var(--color-background-alt) 100%);
}

.elementor .prss-home-bridal__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 901px) {
  .elementor .prss-home-bridal__visual {
    aspect-ratio: 5 / 6;
  }
}

/* Mini-feature text hierarchy: eyebrow label → service name (display font)
   → price/duration (rendered live via the existing shortcode). */
.prss-home-bridal__label,
.prss-w-bridal-label .elementor-heading-title {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-block: 1.2em 0.4em;
}

.prss-home-bridal__service-name,
.prss-w-bridal-name .elementor-heading-title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-medium);
  font-size: 1.4rem;
  color: var(--color-text);
}

.prss-home-bridal .elementor-shortcode {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 1rem;
  color: var(--color-muted);
  margin-block: 0.3em 0.4em;
}

.prss-home-bridal .elementor-widget-shortcode,
.prss-home-bridal .elementor-widget-html {
  --kit-widget-spacing: 4px;
}

@media (max-width: 900px) {
  .elementor .prss-home-bridal__visual {
    order: -1;
    max-width: none;
    aspect-ratio: 4 / 5;
    /* Full-bleed on mobile (Prompt #10D) -- same reasoning as the hero visual. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
  }
}

/* ---------------------------------------------------------------------
 * Discovery & Final CTA sections
 * ------------------------------------------------------------------- */

.prss-home-discovery,
.prss-home-final {
  text-align: center;
}

.prss-home-discovery {
  padding-block: clamp(48px, 6vw, 88px);
}

.prss-home-discovery .prss-home-copy,
.prss-home-final .prss-home-copy {
  max-width: 54ch;
  margin-inline: auto;
}

.prss-home-final {
  background: var(--color-primary);
}

.prss-home-final .prss-home-heading,
.prss-home-final .prss-w-heading .elementor-heading-title {
  color: var(--color-surface);
}

.prss-home-final .prss-home-cta--primary,
.elementor .prss-home-final .prss-w-cta--primary .elementor-button {
  background: var(--color-surface);
  color: var(--color-primary) !important;
  border-color: var(--color-surface);
}

.prss-home-final .prss-home-cta--primary:hover,
.prss-home-final .prss-home-cta--primary:focus-visible,
.elementor .prss-home-final .prss-w-cta--primary .elementor-button:hover,
.elementor .prss-home-final .prss-w-cta--primary .elementor-button:focus-visible {
  background: var(--color-background-alt);
  border-color: var(--color-background-alt);
  color: var(--color-primary) !important;
}

/* CONTRAST FIX -- closing dark CTA, "Book Appointment".
 *
 * The closing CTA renders as .prss-home-cta--secondary, whose base rule
 * is "background: transparent; color: var(--color-text) !important"
 * (#1C1917, near-black) -- designed for the LIGHT sections. Inside
 * .prss-home-final the section background is var(--color-primary)
 * (#342A25, dark espresso), and this section only ever overrode the
 * --primary variant, never --secondary. Result: near-black text and a
 * dark-brown border on a dark-brown background -- effectively invisible
 * until hover. The button is intended to stay transparent/outlined on
 * the dark section, so per the brief its normal foreground becomes
 * light. Every interactive state is covered explicitly, and background
 * and color are always set together so they can never desync. */
.prss-home-final .prss-home-cta--secondary {
  background: transparent;
  color: var(--color-surface) !important;
  border-color: var(--color-surface);
}

.prss-home-final .prss-home-cta--secondary:hover,
.prss-home-final .prss-home-cta--secondary:focus,
.prss-home-final .prss-home-cta--secondary:focus-visible,
.prss-home-final .prss-home-cta--secondary:active {
  background: var(--color-surface) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-surface);
}

.prss-home-final .prss-home-cta--secondary:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 3px;
}

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

@media (prefers-reduced-motion: reduce) {
  .prss-home-cta,
  .elementor .prss-w-cta .elementor-button,
  .prss-category-card,
  .prss-category-card__arrow,
  .prss-service-card {
    transition: none;
  }

  .prss-service-card:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------
 * Elementor native-widget migration bridge (Homepage only).
 *
 * The homepage CTA rows now hold native Elementor widgets (Button widget +
 * Shortcode widget) rather than a single HTML widget, so each action is a
 * direct flex child of .prss-home-hero__actions. Elementor's own
 * ".e-con > .elementor-widget" sizing would otherwise stretch each action
 * to the full row width; this restores the original shrink-to-content
 * inline behaviour. Nothing outside the homepage matches this selector.
 * ------------------------------------------------------------------- */

.elementor .prss-home-hero__actions > .elementor-widget {
  width: auto;
  max-width: 100%;
}

/* Pre-migration parity: the "order: -1" declaration in the max-width:900px
 * block above was INERT before this migration -- .prss-home-bridal__visual
 * was an inner <div> inside an HTML widget, never a flex child of
 * .prss-home-bridal__grid, so the browser ignored it. Elementor 4's
 * optimized markup makes the Image widget itself the styled flex child,
 * which would newly ACTIVATE it and move the photograph above the copy on
 * mobile -- a visual change this migration is not authorised to make. The
 * original declaration is left intact above; this neutralises it so mobile
 * stacking matches the live pre-migration page exactly. Delete this block
 * if image-first on mobile is the preferred behaviour. */

@media (max-width: 900px) {
  .elementor .prss-home-bridal__visual {
    order: 0;
  }
}