/**
 * Template #1 -- About / Our Story page styling.
 *
 * Loaded only on the "About" page template. Uses the existing design tokens
 * from template-tokens.css. Mirrors the visual scale/rhythm established in
 * packages.css and services-archive.css (same clamp() paddings, same
 * eyebrow/heading/body treatment, same pill CTA language) so this page
 * reads as part of the same template system, not a separate design
 * language. `.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.
 *
 * Refinement pass (2026-08-22): typography and section rhythm raised to a
 * fuller editorial brand-page scale after desktop review. Section order,
 * content, and architecture are unchanged. Pre-refinement backup at
 * wp-content/backups/code-snapshots-about-refine-2026-08-22_185540/.
 */

.prss-about-page {
  width: 100%;
}

.elementor .prss-about-section {
  padding-block: clamp(40px, 5vw, 72px);
}

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

.prss-about-eyebrow,
.prss-w-about-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-about-heading,
.prss-w-about-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-about-heading--h1,
.prss-w-about-h1 .elementor-heading-title {
  font-size: clamp(2.4rem, 4.8vw, 3.85rem);
  line-height: 1.18;
  max-width: 20ch;
}

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

.prss-about-heading--h3,
.prss-w-about-h3 .elementor-heading-title {
  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-about-body,
.prss-w-about-body p {
  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-about-body:last-child,
.elementor .prss-w-about-body:last-child p {
  margin-block-end: 0;
}

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

.prss-about-cta,
.elementor .prss-w-about-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: 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-about-cta--primary,
.elementor .prss-w-about-cta--primary .elementor-button {
  color: var(--color-surface) !important;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.prss-about-cta--primary:hover,
.prss-about-cta--primary:focus-visible,
.elementor .prss-w-about-cta--primary .elementor-button:hover,
.elementor .prss-w-about-cta--primary .elementor-button:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

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

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

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

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

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

.prss-about-hero__intro,
.prss-w-about-hero-intro p {
  max-width: 62ch;
  margin-block-start: 1.1em;
}

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

/* ---------------------------------------------------------------------
 * Brand introduction (Our Concept)
 * ------------------------------------------------------------------- */

.elementor .prss-about-concept {
  border-top: 1px solid var(--color-border);
}

.prss-about-concept .prss-about-body,
.prss-about-concept .prss-w-about-body p {
  max-width: 64ch;
  line-height: 1.8;
}

.prss-about-concept .prss-about-body + .prss-about-body,
.prss-about-concept .prss-w-about-body + .prss-w-about-body p {
  margin-block-start: 0.4em;
}

/* ---------------------------------------------------------------------
 * Three brand principles
 * ------------------------------------------------------------------- */

.elementor .prss-about-principles {
  border-top: 1px solid var(--color-border);
  background: var(--color-background-alt);
  padding-block: clamp(56px, 8.5vw, 100px);
}

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

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

.prss-about-principle__number,
.prss-w-about-principle-number .elementor-heading-title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-medium);
  font-size: clamp(1.9rem, 2.6vw, 2.3rem);
  color: var(--color-accent-soft);
  margin-block-end: 0.55em;
}

@media (max-width: 900px) {
  .elementor .prss-about-principles__grid {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 32px);
  }
}

/* ---------------------------------------------------------------------
 * What We Offer -- editorial list, deliberately not a card grid so this
 * reads as a distinct, more informational treatment from the Homepage's
 * category cards.
 * ------------------------------------------------------------------- */

.elementor .prss-about-offer {
  border-top: 1px solid var(--color-border);
}

.prss-about-offer__list {
  list-style: none;
  margin: clamp(24px, 3vw, 32px) 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(28px, 3.5vw, 48px);
}

.prss-about-offer__item {
  border-block-start: 1px solid var(--color-border);
}

.prss-about-offer__item:nth-last-child(-n+2) {
  border-block-end: 1px solid var(--color-border);
}

.prss-about-offer__item-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 0.75em;
  padding-block: clamp(22px, 2.6vw, 30px);
  text-decoration: none !important;
}

.prss-about-offer__item-name {
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-medium);
  font-size: clamp(1.25rem, 1.7vw, 1.4rem);
  color: var(--color-text);
}

.prss-about-offer__item-desc {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-muted);
  padding-inline-end: 1.5em;
  margin-block-start: 0.35em;
}

.prss-about-offer__item-arrow {
  grid-column: 2;
  grid-row: 1;
  color: var(--color-accent);
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}

.prss-about-offer__item-link:hover .prss-about-offer__item-arrow,
.prss-about-offer__item-link:focus-visible .prss-about-offer__item-arrow {
  transform: translateX(4px);
}

:root[dir="rtl"] .prss-about-offer__item-link:hover .prss-about-offer__item-arrow,
:root[dir="rtl"] .prss-about-offer__item-link:focus-visible .prss-about-offer__item-arrow {
  transform: translateX(-4px);
}

.prss-about-offer__item-link:hover .prss-about-offer__item-name,
.prss-about-offer__item-link:focus-visible .prss-about-offer__item-name {
  color: var(--color-accent);
}

.prss-about-offer__item-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

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

  .prss-about-offer__item {
    border-block-end: 1px solid var(--color-border);
    border-block-start: none;
  }

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

  .prss-about-offer__item:nth-last-child(-n+2) {
    border-block-end: 1px solid var(--color-border);
  }
}

/* ---------------------------------------------------------------------
 * The Client Journey
 * ------------------------------------------------------------------- */

.elementor .prss-about-journey {
  border-top: 1px solid var(--color-border);
}

.elementor .prss-about-journey__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3.4vw, 40px);
  margin-block-start: clamp(28px, 3.2vw, 40px);
}

.prss-about-journey__step-number,
.prss-w-about-journey-number .elementor-heading-title {
  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 (max-width: 900px) {
  .elementor .prss-about-journey__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

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

.elementor .prss-about-visual {
  padding-block: 0;
}

.elementor .prss-about-visual__media {
  width: 100%;
}

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

/* ---------------------------------------------------------------------
 * Why This Experience Works
 * ------------------------------------------------------------------- */

.elementor .prss-about-why {
  border-top: 1px solid var(--color-border);
}

.prss-about-why__list,
.prss-w-about-why-list ul {
  list-style: none;
  margin: clamp(24px, 3vw, 32px) 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1em 3em;
  max-width: 980px;
}

.prss-about-why__list li,
.prss-w-about-why-list li {
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--color-muted);
  line-height: 1.7;
  padding-inline-start: 1.3em;
  position: relative;
}

.prss-about-why__list li::before,
.prss-w-about-why-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);
}

@media (max-width: 700px) {
  .elementor .prss-about-why__list,
  .elementor .prss-w-about-why-list ul {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
 * Riyadh positioning / Bridal connection -- centered editorial bands
 * ------------------------------------------------------------------- */

.elementor .prss-about-riyadh {
  border-top: 1px solid var(--color-border);
}

.prss-about-riyadh .prss-about-body,
.prss-about-riyadh .prss-w-about-body p {
  max-width: 64ch;
  line-height: 1.8;
}

.elementor .prss-about-bridal {
  border-top: 1px solid var(--color-border);
  background: var(--color-background-alt);
  text-align: center;
  padding-block: clamp(48px, 7vw, 88px);
}

.prss-about-bridal .prss-about-body,
.prss-about-bridal .prss-w-about-body p {
  max-width: 62ch;
  margin-inline: auto;
  margin-block-end: 1.6em;
}

/* ---------------------------------------------------------------------
 * Closing CTA
 * ------------------------------------------------------------------- */

.elementor .prss-about-closing {
  border-top: 1px solid var(--color-border);
  text-align: center;
  padding-block: clamp(48px, 7vw, 88px);
}

.prss-about-closing .prss-about-body,
.prss-about-closing .prss-w-about-body p {
  max-width: 54ch;
  margin-inline: auto;
  margin-block-end: 1.6em;
}

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

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

@media (prefers-reduced-motion: reduce) {
  .prss-about-cta,
  .elementor .prss-w-about-cta .elementor-button,
  .prss-about-offer__item-arrow {
    transition: none;
  }
}

/* ---------------------------------------------------------------------
 * Elementor native-widget migration bridge (About page only).
 *
 * Added when /about/ moved from template-about.php to a native Elementor
 * document. Nothing here is a new design decision -- these rules only
 * reconnect the existing About styling to the markup Elementor emits.
 * All bridge selectors are deliberately kept at or below the specificity
 * of Elementor per-element CSS (.elementor-217 .elementor-element.X ...),
 * and about.css is enqueued BEFORE post-217.css, so anything set through
 * Elementor Content/Style/Advanced controls overrides these rules without
 * needing !important.
 * ------------------------------------------------------------------- */

/* CTA rows now hold native Button/Shortcode widgets as direct flex items;
   restore shrink-to-content sizing instead of Elementor full-width. */
.elementor .prss-about-hero__actions > .elementor-widget,
.elementor .prss-about-closing__actions > .elementor-widget {
  width: auto;
  max-width: 100%;
}

/* Text Editor widget wrapping the "Why this experience works" list: the
   grid/bullet styling lives on the widget class so it survives content
   edits made through the Elementor visual editor. */
.elementor .prss-w-about-why-list ul {
  margin-block-start: clamp(24px, 3vw, 32px);
}