/*
 * 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; }
}