/* ============================================
   OPTIMAL HEALTH - RESOURCES SECTION STYLES
   SCOPED TO /resources ROUTES ONLY

   Based on Brandpad Design System:
   - 06 Graphic & Content System (Tier 1 & 2)
   - 03 Typography (UN-11, Call & Response, Band)
   - 04 Colour (Lime Yellow accent, monochrome base)
   ============================================ */

/* ============================================
   DESIGN SYSTEM FOUNDATION
   ============================================ */

:root {
  /* 4x4 Grid System – Rule of Halves (Tier 1) */
  --grid-gap-none: 0;
  --grid-gap-line: 1px;
  --grid-gap-small: 8px;
  --grid-gap-medium: 16px;
  --grid-gap-large: 32px;

  /* Typography Hierarchy (03 Typography) */
  /* Headline = 100%, Body = 30%, Captions = 20% */
  --type-headline: 48px;
  --type-body: 16px; /* ~30% of 48px */
  --type-caption: 12px; /* ~20% of 48px */
  --type-nav: 16px;

  /* Spacing System (8px base unit) */
  --module-padding: 32px; /* Internal module padding */
  --section-gap: 64px; /* Gap between major sections */

  /* Colour Palette (04 Colour) */
  --oh-white: #FFFFFF;
  --oh-black: #000000;
  --oh-grey-dark: #A0A0A0;
  --oh-lime: #F3FFB1;
  --oh-lime-gradient: linear-gradient(135deg, #F3FFB1 0%, #FAFFDE 100%);
  --oh-tint-1: hsla(0, 0%, 0%, 0.05);
  --oh-tint-2: hsla(0, 0%, 0%, 0.1);
}

/* ============================================
   4x4 GRID SYSTEM (Tier 1)
   ============================================ */

/* 4x4 grid based on 06 Graphic & Content System – Tier 1 */
.oh-grid-4x4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap-none);
  min-height: 400px;
}

/* Rule of Halves – 1/2 + 1/2 split (Tier 1) */
.oh-grid-halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap-none);
}

/* Rule of Halves – 1/4 + 3/4 split */
.oh-grid-quarter-three {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--grid-gap-none);
  align-items: start;
}

/* Rule of Halves – 3/4 + 1/4 split */
.oh-grid-three-quarter {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: var(--grid-gap-none);
  align-items: start;
}

/* Responsive Grid Behavior */
@media (min-width: 1200px) {
  /* Desktop: preserve multi-column modular feeling */
  .oh-grid-4x4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 600px) and (max-width: 1199px) {
  /* Tablet: maintain composition but simplify */
  .oh-grid-4x4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .oh-grid-quarter-three,
  .oh-grid-three-quarter {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 599px) {
  /* Mobile: stack deliberately (not randomly) */
  .oh-grid-4x4,
  .oh-grid-halves,
  .oh-grid-quarter-three,
  .oh-grid-three-quarter {
    grid-template-columns: 1fr;
  }

  /* Maintain visual hierarchy even when stacked */
  .oh-module-frame {
    min-height: 50vh;
  }
}

/* ============================================
   MODULAR FRAME SYSTEM (Tier 2)
   ============================================ */

/* Module Frame – Clear grid lines, strong verticals/horizontals */
.oh-module-frame {
  border: 1px solid var(--oh-tint-2);
  padding: var(--module-padding);
  background: var(--oh-white);
  min-height: 400px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.oh-module-frame:hover {
  border-color: var(--oh-lime);
  transition: border-color 0.2s ease;
}

/* CONTENT 1 – Image only (Tier 2) */
.oh-content-1 {
  grid-area: auto;
  position: relative;
  overflow: hidden;
  min-height: 400px;
  border: 1px solid var(--oh-tint-2);
}

.oh-content-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* CONTENT 2 – Product (name, shot, in-use) */
.oh-content-2 {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--grid-gap-medium);
  padding: var(--module-padding);
  border: 1px solid var(--oh-tint-2);
  background: var(--oh-white);
  min-height: 400px;
}

.oh-content-2 .product-shot {
  object-fit: contain;
  width: 100%;
  max-height: 300px;
}

.oh-content-2 .in-use-note {
  font-size: var(--type-caption);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* CONTENT 3 – Product (shot, benefit, wordmark) */
.oh-content-3 {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: var(--grid-gap-small);
  padding: var(--module-padding);
  background: var(--oh-tint-1);
  border: 1px solid var(--oh-tint-2);
  min-height: 400px;
  text-decoration: none;
  color: var(--oh-black);
  transition: all 0.2s ease;
}

.oh-content-3:hover {
  background: var(--oh-white);
  border-color: var(--oh-lime);
  transform: translateY(-2px);
}

.oh-content-3 .resource-image {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  min-height: 200px;
}

.oh-content-3 .benefit {
  font-size: var(--type-body);
  line-height: 1.6;
}

/* ============================================
   TYPOGRAPHY – CALL & RESPONSE SYSTEM
   (03 Typography)
   ============================================ */

/* Call & Response – Two-line product descriptor */
.oh-descriptor {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.oh-call {
  font-size: var(--type-caption); /* 20% of headline */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  font-weight: 400;
}

.oh-response {
  font-size: 24px; /* ~50% of headline */
  font-weight: 400;
  line-height: 1.2;
  text-transform: capitalize;
}

/* Band System – CTAs and emphasis (03 Typography) */
.oh-band {
  background: var(--oh-lime);
  color: var(--oh-black);
  padding: 8px 16px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--type-nav);
  font-weight: 400;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  text-decoration: none;
}

.oh-band:hover {
  background: #E5F0A5; /* Darker lime */
}

/* ============================================
   RESOURCES LANDING PAGE
   ============================================ */

.resources-landing-oh {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--section-gap) var(--module-padding);
}

/* Hero Section – Rule of Halves (1/4 + 3/4) */
.resources-hero {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--module-padding);
  margin-bottom: var(--section-gap);
  min-height: 60vh;
  align-items: center;
}

.resources-hero-meta {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap-medium);
  padding: var(--module-padding);
  border-left: 2px solid var(--oh-lime);
  background: var(--oh-tint-1);
}

.resources-hero-meta h1 {
  font-size: clamp(32px, 8vw, 48px);
  font-weight: 400;
  line-height: 1.1;
  text-transform: capitalize;
  margin: 0;
}

.resources-hero-meta .caption {
  font-size: var(--type-caption);
  line-height: 1.4;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.resources-hero-visual {
  background: var(--oh-tint-1);
  border: 1px solid var(--oh-tint-2);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  padding: 0;
}

.resources-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 400px;
  display: block;
}

/* Resources Grid – 4x4 modular system (Tier 2) */
.resources-grid-oh {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap-none);
  margin-bottom: var(--section-gap);
}

@media (min-width: 900px) and (max-width: 1199px) {
  .resources-grid-oh {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .resources-grid-oh {
    grid-template-columns: repeat(2, 1fr);
  }

  .resources-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

@media (max-width: 599px) {
  .resources-grid-oh {
    grid-template-columns: 1fr;
  }

  .resources-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .resources-landing-oh {
    padding: var(--module-padding) 16px;
  }
}

/* ============================================
   RESOURCE DETAIL PAGE
   ============================================ */

.resource-detail-oh {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--section-gap) var(--module-padding);
}

/* Resource Hero – Rule of Halves (1/4 + 3/4) */
.resource-hero-oh {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--grid-gap-none);
  margin-bottom: var(--section-gap);
  border: 1px solid var(--oh-tint-2);
}

.resource-hero-meta {
  padding: var(--module-padding);
  background: var(--oh-tint-1);
  border-right: 1px solid var(--oh-tint-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--grid-gap-medium);
}

.resource-hero-meta h1 {
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

.resource-hero-visual {
  background: var(--oh-white);
  padding: 0;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.resource-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 400px;
  display: block;
}

/* Resource Content – Rule of Halves (1/2 + 1/2) */
.resource-content-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--module-padding);
  align-items: start;
}

.resource-main-content {
  padding: var(--module-padding);
  background: var(--oh-white);
  border: 1px solid var(--oh-tint-2);
  min-height: 600px;
}

.resource-sidebar-oh {
  position: sticky;
  top: calc(var(--module-padding) + 80px); /* Account for fixed header */
  padding: var(--module-padding);
  background: var(--oh-tint-1);
  border: 1px solid var(--oh-tint-2);
}

/* Typography within resource content */
.resource-main-content h2 {
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 400;
  line-height: 1.3;
  margin-top: var(--section-gap);
  margin-bottom: var(--grid-gap-medium);
  text-transform: capitalize;
}

.resource-main-content h3 {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  margin-top: var(--module-padding);
  margin-bottom: var(--grid-gap-small);
}

.resource-main-content p {
  font-size: var(--type-body);
  line-height: 1.6;
  margin-bottom: var(--grid-gap-medium);
}

.resource-main-content ul,
.resource-main-content ol {
  margin-bottom: var(--grid-gap-medium);
  padding-left: var(--module-padding);
}

.resource-main-content li {
  margin-bottom: var(--grid-gap-small);
  line-height: 1.6;
}

/* Links with lime accent (04 Colour – controlled usage) */
.resource-main-content a {
  color: var(--oh-black);
  background: var(--oh-lime);
  padding: 2px 6px;
  text-decoration: none;
  transition: background 0.2s ease;
  border-radius: 2px;
}

.resource-main-content a:hover {
  background: #E5F0A5;
  text-decoration: underline;
}

@media (max-width: 1199px) {
  .resource-hero-oh {
    grid-template-columns: 1fr;
  }

  .resource-hero-meta {
    border-right: none;
    border-bottom: 1px solid var(--oh-tint-2);
  }

  .resource-content-layout {
    grid-template-columns: 1fr;
  }

  .resource-sidebar-oh {
    position: static;
  }
}

@media (max-width: 599px) {
  .resource-detail-oh {
    padding: var(--module-padding) 16px;
  }
}

/* ============================================
   KEY TAKEAWAYS REDESIGN
   ============================================ */

.oh-key-takeaways {
  padding: var(--module-padding);
  background: var(--oh-tint-1);
  border-left: 4px solid var(--oh-lime);
  margin-bottom: var(--section-gap);
}

.oh-key-takeaways h2 {
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--grid-gap-medium);
}

.oh-key-takeaways ul {
  list-style: none;
  padding: 0;
}

.oh-key-takeaways li {
  font-size: var(--type-body);
  line-height: 1.6;
  margin-bottom: var(--grid-gap-small);
  padding-left: var(--grid-gap-medium);
  position: relative;
}

.oh-key-takeaways li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--oh-grey-dark);
}

/* ============================================
   RELATED RESOURCES GRID
   ============================================ */

.oh-related-resources {
  margin-top: var(--section-gap);
  padding-top: var(--section-gap);
  border-top: 1px solid var(--oh-tint-2);
}

.oh-related-resources h2 {
  font-size: 24px;
  font-weight: 400;
  text-transform: capitalize;
  margin-bottom: var(--module-padding);
}

.oh-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap-none);
}

@media (max-width: 899px) {
  .oh-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .oh-related-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   MEDICAL DISCLAIMER
   ============================================ */

.oh-disclaimer {
  background: var(--oh-tint-1);
  padding: var(--module-padding);
  border-left: 2px solid var(--oh-grey-dark);
  margin-top: var(--section-gap);
  font-size: 14px;
  line-height: 1.6;
}

.oh-disclaimer strong {
  display: block;
  margin-bottom: var(--grid-gap-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--type-caption);
}