/* =========================================================
   ORA & STONE — GENERIC PAGES + ABOUT/BRAND STORY
   Loaded on WordPress pages (page.php / page-about.php).
   ========================================================= */

/* ---- Generic page ---- */
.page-header { padding-block: var(--space-2xl) var(--space-lg); text-align: center; }
.page-header__title { margin-bottom: 0; }
.page-header__media { aspect-ratio: 21 / 9; overflow: hidden; background: var(--color-bg-alt); margin-bottom: var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-hover); }
.page-header__media img { width: 100%; height: 100%; object-fit: cover; }

.page-body { padding-bottom: var(--space-2xl); }
.page-body > *:last-child { margin-bottom: 0; }

/* Restore list styling for prose content (base.css strips list-style globally for nav/structural use) */
.page-body ul, .page-body ol { list-style: revert; margin: 0 0 var(--space-sm) var(--space-md); padding: 0; }
.page-body li { margin-bottom: var(--space-3xs); color: var(--color-ink-soft); }
.page-body blockquote {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-style: italic;
  color: var(--color-ink);
  border-left: 3px solid transparent;
  border-image: var(--gradient-vibrant) 1;
  padding-left: var(--space-md);
  margin: var(--space-lg) 0;
}
.page-body img { margin-block: var(--space-md); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.page-body a { color: var(--color-blue); text-decoration: underline; text-underline-offset: 2px; }
.page-body a:hover { color: var(--color-coral); }

/* ---- About: intro ---- */
.about-intro { position: relative; text-align: center; padding-bottom: var(--space-lg); }
.about-intro::before {
  content: "";
  position: absolute;
  inset: -10% -20%;
  background: var(--gradient-mesh);
  filter: blur(70px);
  z-index: -1;
  pointer-events: none;
}
.about-intro .label {
  display: block;
  margin-bottom: var(--space-sm);
  color: var(--color-coral);
}
.about-intro__lead { font-size: var(--text-body-lg); max-width: 56ch; margin-inline: auto; }

/* ---- About: alternating story teaser ---- */
.story-teaser--reverse { grid-template-columns: 1.1fr 0.9fr; }

/* ---- About: values ---- */
.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.about-values__item {
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.about-values__item:hover { box-shadow: var(--shadow-vibrant); transform: translateY(-3px); }
.about-values__item h3 { margin-bottom: var(--space-2xs); }
.about-values__item p { margin: 0; font-size: var(--text-small); }
@media (max-width: 860px) {
  .about-values { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* ---- About: stats band ---- */
.about-stats-band { position: relative; overflow: hidden; background: var(--color-ink); color: var(--color-bg); }
.about-stats-band::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: var(--gradient-mesh-dark);
  filter: blur(70px);
  pointer-events: none;
}
.about-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  text-align: center;
}
.about-stats__item { display: flex; flex-direction: column; gap: var(--space-2xs); }
.about-stats__number {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  color: var(--color-coral-light);
}
.about-stats .label { color: rgba(250, 247, 242, 0.7); }
@media (max-width: 700px) {
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl) var(--space-md); }
}

/* ---- About: closing CTA ---- */
.about-cta { text-align: center; }
.about-cta h2 { max-width: 26ch; margin-inline: auto; }

/* ---- Contact: hero ---- */
.contact-hero { position: relative; text-align: center; padding-bottom: var(--space-lg); }
.contact-hero::before {
  content: "";
  position: absolute;
  inset: -10% -20%;
  background: var(--gradient-mesh);
  filter: blur(70px);
  z-index: -1;
  pointer-events: none;
}
.contact-hero .label { display: block; margin-bottom: var(--space-sm); color: var(--color-coral); }
.contact-hero__lead { font-size: var(--text-body-lg); max-width: 56ch; margin-inline: auto; }

/* ---- Contact: info cards ---- */
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.contact-info-card {
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.contact-info-card:hover { box-shadow: var(--shadow-vibrant); transform: translateY(-3px); }
.contact-info-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  color: var(--color-coral);
}
.contact-info-card h3 { margin-bottom: var(--space-2xs); font-size: var(--text-body-lg); }
.contact-info-card p { margin: 0; font-size: var(--text-small); }
.contact-info-card a { color: var(--color-ink-soft); text-decoration: none; }
.contact-info-card a:hover { color: var(--color-coral); }
.contact-hours { list-style: none; margin: 0; padding: 0; font-size: var(--text-small); color: var(--color-ink-soft); }
.contact-hours li { display: flex; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-3xs); }
.contact-hours li + li { border-top: 1px solid var(--color-border); }
@media (max-width: 960px) {
  .contact-info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .contact-info-grid { grid-template-columns: 1fr; }
}

/* ---- Contact: socials ---- */
.contact-socials { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.contact-socials__links { display: flex; gap: var(--space-sm); }
.contact-socials__links .navbar__icon-btn {
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
}
.contact-socials__links .navbar__icon-btn:hover { background: var(--color-coral); border-color: var(--color-coral); color: var(--color-surface); }

/* ---- Contact: map + store panel ---- */
.contact-map { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-lg); align-items: stretch; }
.contact-map__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-height: 320px;
}
.contact-map__frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }
.contact-map__panel {
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
}
.contact-map__panel h3 { margin: 0; }
.contact-map__panel p { margin: 0; font-size: var(--text-small); }
.contact-map__panel .btn { align-self: flex-start; }
@media (max-width: 860px) {
  .contact-map { grid-template-columns: 1fr; }
}

/* ---- Contact: support / trust band ---- */
.contact-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  text-align: center;
}
.contact-features__item {
  padding: var(--space-lg) var(--space-md);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
}
.contact-features__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: var(--space-sm);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-teal);
  box-shadow: var(--shadow-card);
}
.contact-features__item h3 { margin-bottom: var(--space-2xs); font-size: var(--text-body-lg); }
.contact-features__item p { margin: 0; font-size: var(--text-small); }
@media (max-width: 860px) {
  .contact-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .contact-features { grid-template-columns: 1fr; }
}