@import url("/styles.css?v=3");

/* ===== Editorial page template — built off Odd Ritual Golf Club's real
   "/pages/about" Webflow markup (grid ratios, aspect ratios, sticky-stack
   and flickthrough behavior), adapted to our fonts/colors/images. ===== */

.page-hero {
  padding-top: clamp(120px, 12vw, 170px);
  padding-bottom: clamp(60px, 8vw, 110px);
}

.page-hero_top {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 40px);
}

.page-hero_logo {
  flex-shrink: 0;
}

.page-hero_logo img {
  width: clamp(40px, 4vw, 64px);
  height: auto;
}

.page-hero_bottom {
  margin-top: clamp(60px, 8vw, 110px);
  display: flex;
  justify-content: flex-end;
}

.page-hero_intro {
  font-size: 14px;
  line-height: 21px;
  color: rgba(250, 250, 250, 0.85);
  max-width: 480px;
  text-align: left;
}

.page-hero_title {
  font-family: var(--body-font);
  font-weight: 700;
  text-transform: none;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.35;
  margin-top: 0;
  max-width: 720px;
}

/* ---- Full-bleed image band with 3-part eyebrow ---- */
.img-band {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden;
  background: #000000;
}

.img-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-band_eyebrow {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 64px);
}

.img-band_eyebrow p {
  font-family: var(--body-font);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.img-band_eyebrow .is-center {
  text-align: center;
}

.img-band_eyebrow .is-right {
  text-align: right;
}

/* ---- Parallax / flickthrough image pair ---- */
.duo-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(48px, 6vw, 90px) clamp(24px, 5vw, 64px) 0;
  position: relative;
}

.duo-media_right {
  aspect-ratio: 4.35 / 6;
  position: relative;
  overflow: hidden;
}

.duo-media_right img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
}

.duo-media_left {
  aspect-ratio: 4.35 / 2.8;
  position: relative;
  overflow: hidden;
  align-self: end;
}

.flick-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.flick-img.show {
  opacity: 1;
}

.floating-mark {
  position: absolute;
  left: 50%;
  bottom: clamp(-40px, -4vw, -24px);
  transform: translate(-50%, 50%);
  width: clamp(70px, 8vw, 120px);
  height: clamp(70px, 8vw, 120px);
  z-index: 3;
  opacity: 0.9;
}

.floating-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- Full-width single image banner ---- */
.full-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---- Vision / story section ---- */
.vision-section {
  padding: clamp(90px, 12vw, 160px) 0 clamp(60px, 8vw, 100px);
  border-top: 1px solid rgba(250, 250, 250, 0.08);
}

.vision-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(56px, 7vw, 96px);
}

.vision-eyebrow {
  grid-column: span 6;
  font-family: var(--nav-font);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.vision-statement {
  grid-column: 7 / span 6;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.35;
}

.vision-body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

.vision-body p {
  grid-column: span 3;
  font-size: 14px;
  line-height: 20px;
  color: rgba(250, 250, 250, 0.85);
}

.vision-body p:first-of-type {
  grid-column: 7 / span 3;
}

/* ---- Full-width follow-up paragraphs and lists within a vision-body,
   used when a section has a bullet/numbered list or more copy than the
   two-paragraph grid can hold ---- */
.vision-body .vision-wide {
  grid-column: 7 / span 6;
  margin-top: 1.2em;
  font-size: 14px;
  line-height: 20px;
  color: rgba(250, 250, 250, 0.85);
}

.vision-body ul.vision-wide,
.vision-body ol.vision-wide {
  padding-left: 1.2em;
}

.vision-body ul.vision-wide {
  list-style: disc;
}

.vision-body ol.vision-wide {
  list-style: decimal;
}

.vision-body .vision-wide li + li {
  margin-top: 0.6em;
}

/* ---- Simple centered block: header + copy merged into one flowing block,
   left-aligned text in a ~40%-wide column centered on the page ---- */
.vision-simple {
  max-width: 60%;
  margin: 0 auto;
  text-align: left;
}

.vision-simple > * + * {
  margin-top: 1.2em;
}

.vision-simple .vision-statement {
  grid-column: auto;
}

.vision-simple p {
  font-size: 14px;
  line-height: 20px;
  color: rgba(250, 250, 250, 0.85);
}

.vision-simple ul,
.vision-simple ol {
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 20px;
  color: rgba(250, 250, 250, 0.85);
}

.vision-simple ul {
  list-style: disc;
}

.vision-simple ol {
  list-style: decimal;
}

.vision-simple li + li {
  margin-top: 0.6em;
}

/* ---- Our Process: centered header, four step cards in a row ---- */
.process-head {
  margin-bottom: clamp(40px, 5vw, 64px);
  text-align: center;
}

.process-head .vision-statement {
  grid-column: auto;
  margin-bottom: 14px;
}

.process-lead {
  font-size: 14px;
  line-height: 20px;
  color: rgba(250, 250, 250, 0.85);
  max-width: 480px;
  margin: 0 auto;
}

.process-footer {
  margin: clamp(32px, 4vw, 48px) auto 0;
  max-width: 620px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(250, 250, 250, 0.85);
  text-align: center;
}

/* Inline links within this page's long-form prose (outside .section, so the
   sitewide .section a.inline-link rule doesn't reach them). */
.page-hero_intro a.inline-link,
.vision-body a.inline-link,
.vision-simple a.inline-link,
.reasons-grid a.inline-link,
.page-cta_copy a.inline-link {
  color: var(--fg);
  text-decoration: underline;
}

/* ---- Process card border glow hover effect (ported from the homepage's
   step-card/reason-card BorderGlow treatment) ---- */
.reason-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --glow-padding: 16px;
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(250, 250, 250, 0.15);
  padding: clamp(20px, 2.4vw, 28px);
}

.reason-card .step-edge-light {
  content: "";
  position: absolute;
  inset: calc(var(--glow-padding) * -1);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: plus-lighter;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  mask-image: conic-gradient(
    from var(--cursor-angle) at center,
    black 2.5%, transparent 10%, transparent 90%, black 97.5%
  );
}

.reason-card:hover .step-edge-light {
  transition: opacity 0.25s ease-out;
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
}

.reason-card .step-edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(238, 251, 82, 1),
    inset 0 0 1px 0 rgba(238, 251, 82, 0.6),
    inset 0 0 3px 0 rgba(238, 251, 82, 0.5),
    inset 0 0 6px 0 rgba(238, 251, 82, 0.4),
    inset 0 0 15px 0 rgba(238, 251, 82, 0.3),
    inset 0 0 25px 2px rgba(238, 251, 82, 0.2),
    inset 0 0 50px 2px rgba(238, 251, 82, 0.1),
    0 0 1px 0 rgba(238, 251, 82, 0.6),
    0 0 3px 0 rgba(238, 251, 82, 0.5),
    0 0 6px 0 rgba(238, 251, 82, 0.4),
    0 0 15px 0 rgba(238, 251, 82, 0.3),
    0 0 25px 2px rgba(238, 251, 82, 0.2),
    0 0 50px 2px rgba(238, 251, 82, 0.1);
}

/* ---- Sticky image stack (pure CSS position: sticky) ----
   Hidden for now per template simplification (one full-width image instead);
   markup kept in place in case we bring this back later. */
.sticky-stack {
  display: none;
  position: relative;
  margin-top: clamp(60px, 8vw, 110px);
}

.sticky-stack_item {
  height: 100svh;
  display: flex;
  padding: clamp(24px, 3vw, 40px);
  position: sticky;
  bottom: 0;
}

.sticky-stack_item .frame {
  width: 66.6%;
  aspect-ratio: 6.5 / 3.75;
  position: relative;
  overflow: hidden;
}

.sticky-stack_item .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sticky-stack_item.is-1 { z-index: 5; justify-content: flex-end; align-items: flex-end; padding-bottom: clamp(40px, 5vw, 80px); }
.sticky-stack_item.is-2 { z-index: 4; justify-content: center; align-items: flex-start; }
.sticky-stack_item.is-3 { z-index: 3; justify-content: flex-start; align-items: center; }
.sticky-stack_item.is-4 { z-index: 2; justify-content: center; align-items: flex-end; padding-bottom: clamp(28px, 4vw, 56px); }
.sticky-stack_item.is-5 {
  z-index: 1;
  justify-content: center;
  align-items: center;
  background: var(--bg);
}

.sticky-stack_item.is-5 .frame {
  width: 60%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.sticky-stack_item.is-5 .frame img {
  width: 70%;
  height: auto;
  object-fit: contain;
}

/* ---- Community CTA ---- */
.page-cta {
  padding: clamp(90px, 10vw, 140px) 0 clamp(60px, 8vw, 100px);
  text-align: center;
}

.page-cta_title {
  font-family: var(--body-font);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.15;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-cta_copy {
  max-width: 620px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 21px;
  color: rgba(250, 250, 250, 0.85);
}

.page-cta_link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: clamp(24px, 3vw, 36px);
  font-family: var(--nav-font);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  transition: color 0.2s ease;
}

.page-cta_link:hover {
  color: var(--accent);
}

.page-cta_link .bracket {
  color: var(--accent);
}

/* ---- Brand flourish ---- */
.page-flourish {
  padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 100px);
  display: flex;
  justify-content: center;
}

.page-flourish img {
  width: min(70vw, 640px);
  height: auto;
  opacity: 0.9;
}

/* ---- Reasons-grid column variants for sections with 3 or 5 repeatable
   sub-items instead of the homepage's default 4 ---- */
.reasons-grid.is-3 {
  grid-template-columns: repeat(3, 1fr);
}

.reasons-grid.is-5 {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 860px) {

  .reasons-grid.is-3,
  .reasons-grid.is-5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .img-band_eyebrow {
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    text-align: center;
  }

  .duo-media {
    grid-template-columns: 1fr;
  }

  .duo-media_right,
  .duo-media_left {
    aspect-ratio: 4 / 5;
  }

  .vision-head,
  .vision-body {
    grid-template-columns: 1fr;
  }

  .vision-statement,
  .vision-body p,
  .vision-body p:first-of-type,
  .vision-body .vision-wide {
    grid-column: auto;
  }

  .vision-body p + p {
    margin-top: 1.2em;
  }

  .vision-simple {
    max-width: 100%;
  }

  .sticky-stack_item .frame {
    width: 100%;
  }
}