/* our-center.css — page-specific layout only; shared components in components.css */

/* ================================================
   HERO
================================================ */
.oc-hero {
  background: var(--bg-hero);
  padding: calc(var(--section-pad) * 0.7) 0 0;
}
.oc-hero__text {
  text-align: center;
  padding-bottom: 40px;
}
.oc-hero__heading {
  font-family: var(--font-head);
  font-size: var(--text-h1);
  font-weight: var(--weight-h1);
  color: var(--clr-ink);
  margin-bottom: 14px;
  line-height: var(--leading-heading);
  text-wrap: balance;
}
.oc-hero__tagline {
  font-family: var(--font-head);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--clr-teal);
  margin-bottom: 10px;
}
.oc-hero__lead {
  font-size: var(--text-base);
  color: var(--clr-ink);
  line-height: var(--leading-loose);
  max-width: 600px;
  margin: 0 auto 28px;
}
.oc-hero__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  max-width: 1320px;
  margin: 0 auto;
}
.oc-hero__images img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 1/1;
  border-radius: var(--radius-lg);
}

/* ================================================
   FEATURE TAGS
================================================ */
.oc-tags {
  background: var(--bg-section);
  padding: var(--section-pad) 0;
}
.oc-tags__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.oc-tag {
  font-family: var(--font-head);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--clr-ink);
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
}

/* ================================================
   SERVICE AREA
================================================ */
.oc-area {
  background: var(--bg-page);
  padding: var(--section-pad) 0;
  text-align: center;
}
.oc-area__heading {
  font-family: var(--font-head);
  font-size: var(--text-h2);
  font-weight: var(--weight-h2);
  color: var(--clr-teal);
  margin-bottom: 20px;
  text-wrap: balance;
}
.oc-area__body {
  max-width: 760px;
  margin: 0 auto;
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--clr-ink);
}

/* ================================================
   PLAY SPACES
================================================ */
.oc-spaces {
  background: var(--clr-teal);
  padding: var(--section-pad) 0;
}
.oc-spaces__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-split);
  align-items: start;
}
.oc-spaces__heading {
  font-family: var(--font-head);
  font-size: var(--text-h2);
  font-weight: var(--weight-h2);
  color: var(--text-on-dark);
  margin-bottom: 20px;
  line-height: var(--leading-heading);
  text-wrap: balance;
}
.oc-spaces__body {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--text-on-dark);
}
.oc-spaces__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.oc-spaces__photos img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

/* ================================================
   VIDEO SECTION
================================================ */
.oc-video {
  background: var(--bg-section);
  padding: var(--section-pad) 0;
}
.oc-video__lead {
  font-size: var(--text-lg);
  color: var(--clr-ink);
  line-height: var(--leading-loose);
  max-width: 680px;
  margin: 0 auto 40px;
  text-align: center;
}
.oc-video__embeds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 600px;
  margin: 0 auto;
}
.oc-video__embed {
  position: relative;
  padding-bottom: 177.78%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--clr-ink);
}
.oc-video__embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ================================================
   TRUST (We Know What's Important)
================================================ */
.oc-trust {
  background: var(--bg-hero);
  padding: var(--section-pad) 0;
}
.oc-trust__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-split);
  align-items: center;
}
.oc-trust__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}
.oc-trust__text-top {
  font-family: var(--font-head);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--clr-teal);
  margin-bottom: 12px;
}
.oc-trust__heading {
  font-family: var(--font-head);
  font-size: var(--text-h2);
  font-weight: var(--weight-h2);
  color: var(--clr-ink);
  margin-bottom: 20px;
  line-height: var(--leading-heading);
  text-wrap: balance;
}
.oc-trust__body {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--clr-ink);
}
.oc-trust__body strong { font-weight: 700; }

/* Service-area town links — scoped to .oc-area__body only */
.oc-area__body a {
  font-weight: bold;
  color: var(--text-body);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.oc-area__body a:hover {
  color: var(--primary);
}

/* ================================================
   RESPONSIVE — 900px
================================================ */
@media (max-width: 900px) {
  .oc-spaces__inner   { grid-template-columns: 1fr; }
  .oc-spaces__photos  { max-width: 420px; }
  .oc-video__embeds   { grid-template-columns: 1fr; max-width: 360px; }
  .oc-trust__inner    { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .oc-hero__images    { grid-template-columns: 1fr; max-width: 100%; }
  .oc-spaces__photos  { grid-template-columns: 1fr; max-width: 100%; }
}