/*
 * Page Sections (builder output)
 *
 * Styles for sections created with the per-page Sections Builder.
 *
 * Developed by: Rhyll Neri
 */

.ps-section--fog { background: var(--color-fog); }

.ps-section--primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.ps-section--primary .section__title,
.ps-section--primary .ps-feature__title { color: var(--color-white); }
.ps-section--primary .eyebrow { color: var(--color-accent-light); }

/* Body copy on the dark teal surface — raw <p>/<li> carry an explicit dark
 * colour from typography.css, so recolouring only the container is not enough.
 * Target the text elements themselves to guarantee legible contrast. */
.ps-section--primary,
.ps-section--primary p,
.ps-section--primary li,
.ps-section--primary dd,
.ps-section--primary dt,
.ps-section--primary .entry-content,
.ps-section--primary .section__subtitle,
.ps-section--primary .ps-feature__text,
.ps-section--primary .ps-accordion__a,
.ps-section--primary .ps-cta__text { color: rgba(255, 255, 255, 0.82); }

.ps-section--primary .ps-accordion__q,
.ps-section--primary .stat__value,
.ps-section--primary .about-timeline__title,
.ps-section--primary .about-timeline__year { color: var(--color-white); }

.ps-section--primary .stat__label,
.ps-section--primary .about-timeline__text { color: rgba(255, 255, 255, 0.7); }

.ps-section--primary .ps-accordion__item { border-color: rgba(255, 255, 255, 0.18); }

.ps-section--primary a:not(.btn) {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ps-section--primary a:not(.btn):hover { color: var(--color-accent-light); }

/* ---- Rich text ---- */
.ps-rich { max-width: var(--container-md); }
.ps-rich--center { margin-inline: auto; text-align: center; }
.ps-rich .entry-content { margin-top: var(--space-4); }
.ps-rich__actions { margin-top: var(--space-5); }

/* ---- Image + Text ---- */
.ps-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.ps-media-text--reverse .ps-media-text__media { order: 2; }

.ps-media-text__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}

.ps-media-text__media img { width: 100%; height: 100%; object-fit: cover; }

.ps-media-text__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

.ps-media-text__body .entry-content { margin-top: var(--space-4); margin-bottom: var(--space-5); }

@media (max-width: 768px) {
  .ps-media-text { grid-template-columns: 1fr; }
  .ps-media-text--reverse .ps-media-text__media { order: 0; }
}

/* ---- Feature cards ---- */
.ps-feature { padding: var(--space-6); text-align: left; }

.ps-feature__icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.ps-feature__icon .icon { width: 26px; height: 26px; }

.ps-feature__icon .material-symbols-outlined { font-size: 28px; line-height: 1; }

.ps-feature__title { font-family: var(--font-display); font-size: var(--fs-20); margin-bottom: var(--space-2); }
.ps-feature__text { color: var(--color-text-muted); margin: 0; }

/* ---- Gallery / Carousel ---- */
.ps-gallery--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-5);
}

.ps-gallery__item {
  display: block;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.ps-gallery__fig {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
}

.ps-gallery__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-500) var(--ease-out);
}

.ps-gallery__item:hover .ps-gallery__fig img { transform: scale(1.05); }

.ps-gallery__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: var(--space-6) var(--space-4) var(--space-3);
  color: #fff;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  background: linear-gradient(to top, rgba(15, 27, 34, 0.78), transparent);
}

.ps-gallery__cta { text-align: center; margin-top: var(--space-8); }

/* The carousel reuses the .slider component; just make slides full-bleed. */
.ps-gallery-slider .ps-gallery__item { box-shadow: var(--shadow-lg); }

/* ---- Stats ---- */
.ps-stats { text-align: center; }

/* ---- Accordion / FAQ ---- */
.ps-accordion { max-width: var(--container-md); margin-inline: auto; }

.ps-accordion__item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0;
}

.ps-accordion__q {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.ps-accordion__q::-webkit-details-marker { display: none; }
.ps-accordion__q::after {
  content: '+';
  font-size: var(--fs-24);
  line-height: 1;
  color: var(--color-accent);
  transition: transform var(--dur-200) var(--ease-out);
}
.ps-accordion__item[open] .ps-accordion__q::after { content: '\2212'; }

.ps-accordion__a { color: var(--color-text-muted); padding-top: var(--space-3); }

/* ---- CTA ---- */
.ps-cta {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-7);
  align-items: center;
}

.ps-cta__title { color: var(--color-white); font-size: clamp(1.75rem, 3vw, var(--fs-42)); margin-bottom: var(--space-3); }
.ps-cta__text { color: rgba(255,255,255,0.85); margin: 0; }
.ps-cta__actions { display: flex; justify-content: flex-end; }

@media (max-width: 768px) {
  .ps-cta { grid-template-columns: 1fr; }
  .ps-cta__actions { justify-content: flex-start; }
}

/* ---- Legal pages (Privacy Policy) --------------------------------------
   Reading layout used by page.php for ardent_is_legal_page(). */
.legal__layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 1080px;
  margin-inline: auto;
  align-items: start;
}

.legal__layout--single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

@media (max-width: 900px) {
  .legal__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

.legal__toc {
  position: sticky;
  top: calc(var(--header-height) + var(--space-5));
  padding: var(--space-5);
  background: var(--color-mist);
  border-radius: var(--radius-lg);
}

@media (max-width: 900px) { .legal__toc { position: static; } }

.legal__toc-title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.legal__toc-list {
  list-style: none;
  counter-reset: legal-toc;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.legal__toc-list li {
  counter-increment: legal-toc;
  display: flex;
  gap: var(--space-2);
  font-size: var(--fs-14);
  line-height: var(--lh-snug);
}

.legal__toc-list li::before {
  content: counter(legal-toc, decimal-leading-zero);
  flex-shrink: 0;
  color: var(--color-accent-dark);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
}

.legal__toc-list a { color: var(--color-slate-700); }
.legal__toc-list a:hover { color: var(--color-primary); }

.legal__doc { max-width: 72ch; }

.legal__updated {
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-14);
  color: var(--color-text-muted);
}

.legal__content {
  font-size: var(--fs-17, 1.0625rem);
  line-height: var(--lh-relaxed);
  color: var(--color-slate-700);
}

.legal__content h2 {
  font-size: clamp(1.375rem, 1vw + 1rem, var(--fs-28));
  line-height: var(--lh-snug);
  margin: var(--space-8) 0 var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-ink);
  scroll-margin-top: calc(var(--header-height) + var(--space-5));
}

.legal__content > h2:first-child,
.legal__content > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.legal__content h3 {
  font-size: var(--fs-20);
  margin: var(--space-6) 0 var(--space-3);
  color: var(--color-ink);
}

.legal__content p { margin: 0 0 1.1em; }

.legal__content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.legal__content a:hover { color: var(--color-accent-dark); }

.legal__content strong { color: var(--color-ink); }