/* ============================================
   COHLI HOMEPAGE STYLES
   Styles specific to index.html
   ============================================ */

/* === HERO === */
.hero {
  min-height: 92vh; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; padding: 120px 24px 80px;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, #d4a574 0%, #c9876a 25%, #a7b49c 50%, #9fb1c1 75%, #e0d5c0 100%);
  opacity: .15;
}
.hero-pattern {
  position: absolute; inset: 0; z-index: 1;
  background-image: radial-gradient(circle at 20% 50%, rgba(180,107,82,.08) 0%, transparent 50%),
                     radial-gradient(circle at 80% 20%, rgba(167,180,156,.1) 0%, transparent 40%),
                     radial-gradient(circle at 60% 80%, rgba(159,177,193,.08) 0%, transparent 45%);
}
.hero-content { position: relative; z-index: 2; max-width: 800px; text-align: center; }
.hero-tag {
  display: inline-block; padding: 6px 16px; border-radius: 20px;
  background: rgba(180,107,82,.1); color: var(--terracotta);
  font-size: .8rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 24px;
}
.hero h1 {
  font-family: var(--font-headline); font-size: 3.6rem; font-weight: 900;
  color: var(--dark); line-height: 1.15; margin-bottom: 20px;
}
.hero h1 span { color: var(--terracotta); }
.hero-sub {
  font-size: 1.2rem; color: var(--stone); max-width: 580px;
  margin: 0 auto 36px; line-height: 1.8;
}
.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* === TRUST BAR === */
.trust-bar {
  background: white; border-top: 1px solid var(--clay);
  border-bottom: 1px solid var(--clay); padding: 32px 24px;
}
.trust-inner {
  max-width: 1000px; margin: 0 auto;
  display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; text-align: center;
}
.trust-item { display: flex; flex-direction: column; align-items: center; }
.trust-number {
  font-family: var(--font-headline); font-size: 2rem; font-weight: 900; color: var(--terracotta);
}
.trust-label { font-size: .8rem; color: var(--stone); margin-top: 2px; }

/* === COHORT CARDS === */
.cohort-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 24px; }
.cohort-card {
  background: white; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--clay); transition: var(--ease-slow); cursor: pointer;
}
.cohort-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,.08); }
.cohort-img { height: 200px; width: 100%; }
.cohort-body { padding: 24px; }
.cohort-location {
  font-size: .75rem; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--terracotta); font-weight: 600; margin-bottom: 4px;
}
.cohort-name { font-family: var(--font-headline); font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
.cohort-meta { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; font-size: .85rem; color: var(--stone); }
.cohort-meta-item { display: flex; align-items: center; gap: 4px; }
.cohort-price { font-weight: 700; color: var(--ember); font-size: 1.05rem; margin-top: 12px; }
.cohort-spots { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: .75rem; font-weight: 600; margin-top: 8px; }
.spots-limited { background: rgba(244,171,109,.15); color: #b5651d; }
.spots-open { background: rgba(167,180,156,.15); color: #4a6741; }

/* === HOW IT WORKS === */
.how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.how-step {
  text-align: center; padding: 32px 24px;
  background: white; border-radius: var(--radius-md); border: 1px solid var(--clay);
}
.step-num {
  width: 48px; height: 48px; border-radius: 50%; background: var(--terracotta); color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-headline); font-size: 1.2rem; font-weight: 900;
  margin: 0 auto 16px;
}
.how-step h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.how-step p { font-size: .9rem; color: var(--stone); }

/* === THREE PILLARS === */
.pillars-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.pillar {
  padding: 36px 28px; border-radius: var(--radius-md); position: relative; overflow: hidden;
  min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end;
}
.pillar:nth-child(1) { background: linear-gradient(135deg, rgba(167,180,156,.2) 0%, rgba(167,180,156,.05) 100%); border: 1px solid rgba(167,180,156,.3); }
.pillar:nth-child(2) { background: linear-gradient(135deg, rgba(244,171,109,.2) 0%, rgba(244,171,109,.05) 100%); border: 1px solid rgba(244,171,109,.3); }
.pillar:nth-child(3) { background: linear-gradient(135deg, rgba(159,177,193,.2) 0%, rgba(159,177,193,.05) 100%); border: 1px solid rgba(159,177,193,.3); }
.pillar-icon { font-size: 2.4rem; margin-bottom: 16px; }
.pillar h3 { font-family: var(--font-headline); font-size: 1.4rem; font-weight: 700; margin-bottom: 10px; }
.pillar p { font-size: .92rem; color: var(--stone); }

/* === DAY IN THE LIFE TIMELINE === */
.timeline { max-width: 700px; margin: 0 auto; position: relative; padding-left: 40px; }
.timeline::before {
  content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--terracotta), var(--sage), var(--sky), var(--ember));
}
.timeline-item {
  position: relative; margin-bottom: 24px; padding: 16px 20px;
  background: white; border-radius: var(--radius-sm); border: 1px solid var(--clay);
}
.timeline-item::before {
  content: ''; position: absolute; left: -33px; top: 20px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--terracotta); background: white;
}
.timeline-time { font-size: .8rem; font-weight: 700; color: var(--terracotta); text-transform: uppercase; letter-spacing: .5px; }
.timeline-title { font-weight: 600; margin: 4px 0 2px; }
.timeline-desc { font-size: .85rem; color: var(--stone); }

/* === WHO IS THIS FOR === */
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.who-card {
  padding: 28px; border-radius: var(--radius-md); background: white;
  border: 1px solid var(--clay); display: flex; gap: 16px; align-items: start;
}
.who-icon { font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; }
.who-card h4 { font-size: 1rem; margin-bottom: 4px; }
.who-card p { font-size: .88rem; color: var(--stone); }

/* === FOUNDER STORY === */
.founder-section { background: linear-gradient(135deg, rgba(180,107,82,.06) 0%, rgba(167,180,156,.06) 100%); }
.founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.founder-text h3 { font-family: var(--font-headline); font-size: 1.6rem; margin-bottom: 16px; line-height: 1.3; }
.founder-text p { color: var(--stone); margin-bottom: 14px; }
.founder-img { height: 400px; border-radius: var(--radius-md); }

/* === HONEST SECTION === */
.honest-section { background: var(--dark); color: white; }
.honest-section .section-label { color: var(--apricot); }
.honest-section .section-title { color: white; }
.honest-section .section-desc { color: rgba(255,255,255,.7); }
.honest-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.honest-card { padding: 24px; border-radius: var(--radius-sm); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.honest-card h4 { color: var(--apricot); font-size: 1rem; margin-bottom: 8px; }
.honest-card p { font-size: .9rem; color: rgba(255,255,255,.7); }

/* === NEWSLETTER === */
.newsletter-section { background: linear-gradient(135deg, rgba(210,169,96,.08) 0%, rgba(180,107,82,.06) 100%); }
.newsletter-box { max-width: 560px; margin: 0 auto; text-align: center; }
.newsletter-form { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; justify-content: center; }
.newsletter-input {
  flex: 1; min-width: 240px; padding: 14px 20px; border: 1.5px solid var(--driftwood);
  border-radius: var(--radius-pill); font-family: var(--font-body); font-size: .95rem;
  background: white; outline: none; transition: var(--ease);
}
.newsletter-input:focus { border-color: var(--terracotta); }
.newsletter-btn {
  background: var(--terracotta); color: white; padding: 14px 28px; border-radius: var(--radius-pill);
  font-size: .95rem; font-weight: 600; border: none; cursor: pointer;
  transition: var(--ease); font-family: var(--font-body);
}
.newsletter-btn:hover { background: var(--ember); }

/* === INSTAGRAM GRID === */
.insta-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 4px; border-radius: var(--radius-sm); overflow: hidden; margin: 24px 0; }
.insta-item { aspect-ratio: 1; min-height: 0; }

/* === CTA FOOTER === */
.cta-section { background: var(--terracotta); color: white; text-align: center; padding: 80px 24px; }
.cta-section h2 { font-family: var(--font-headline); font-size: 2.4rem; font-weight: 900; margin-bottom: 16px; }
.cta-section p { font-size: 1.1rem; opacity: .85; max-width: 500px; margin: 0 auto 32px; }

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .hero h1 { font-size: 2.4rem; }
  .how-grid, .pillars-grid, .honest-grid, .who-grid { grid-template-columns: 1fr; }
  .founder-grid { grid-template-columns: 1fr; }
  .trust-inner { gap: 24px; }
  .insta-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 600px) {
  .hero h1 { font-size: 1.8rem; }
  .hero-sub { font-size: 1rem; }
  .cohort-grid { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(2,1fr); }
}