/*
 * Cosmo homepage sections — front-page.php only.
 * Design tokens and shared primitives (.cn-container / .cn-eyebrow / .cn-btn)
 * live in cosmo-chrome.css, which loads site-wide before this file. Here we
 * only add the homepage section blocks, scoped under .cn-home so the base
 * typography can't leak onto HybridMag's blog/archive/single content.
 */

/* Base, scoped to the homepage wrapper only */
.cn-home{
  font-family: var(--cn-font-body);
  color: var(--cn-ink);
  line-height: 1.85;
  word-break: break-word;
}
.cn-home img{ max-width:100%; height:auto; display:block; }
.cn-home h1, .cn-home h2, .cn-home h3, .cn-home h4{
  font-family: var(--cn-font-display);
  color: var(--cn-ink);
  line-height: 1.5;
  margin: 0 0 .6em;
  font-weight: 600;
  letter-spacing: .02em;
}
.cn-home h1{ font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.cn-home h2{ font-size: clamp(1.5rem, 2.6vw, 2rem); }
.cn-home h3{ font-size: 1.15rem; }
.cn-home p{ margin: 0 0 1em; }

/* Signature: growth-ring divider */
.cn-rings{ position:relative; height:26px; overflow:hidden; }
.cn-rings::before{
  content:""; position:absolute; left:50%; top:-140px; width:320px; height:320px;
  border-radius:50%; transform: translateX(-50%);
  border: 1px solid var(--cn-tint-deep);
  box-shadow: 0 0 0 18px var(--cn-tint), 0 0 0 19px var(--cn-tint-deep), 0 0 0 36px var(--cn-tint);
}

/* Signature: ring badge used for USP callouts */
.cn-ring-badge{
  width: 118px; height:118px; border-radius:50%;
  border: 1px solid var(--cn-lime);
  box-shadow: 0 0 0 8px var(--cn-tint);
  display:flex; align-items:center; justify-content:center;
  background: var(--cn-white); font-size:2.1rem; margin: 0 auto 18px;
}

/* =========================================================
   HERO
   ========================================================= */
.cn-hero{ position:relative; min-height: 560px; display:flex; align-items:center; color:#fff; overflow:hidden; }
.cn-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.cn-hero-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(100deg, rgba(34,30,20,.78) 20%, rgba(34,30,20,.35) 75%); }
.cn-hero-inner{ position:relative; z-index:2; max-width: 620px; }
.cn-hero .cn-eyebrow{ color: var(--cn-lime); }
.cn-hero .cn-eyebrow::before{ background: var(--cn-lime); }
.cn-hero h1{ color:#fff; }
.cn-hero-sub{ font-size:1.05rem; color: #ece7da; margin-bottom: 1.8em; }
.cn-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }

/* =========================================================
   SECTIONS
   ========================================================= */
.cn-section{ padding: 70px 0; }
.cn-section.tint{ background: var(--cn-tint); }
.cn-section-head{ text-align:center; max-width:680px; margin: 0 auto 44px; }
.cn-section-head .cn-eyebrow{ justify-content:center; }
.cn-section-head p{ color: var(--cn-ink-soft); margin:0; }

/* USP ring cards */
.cn-usp-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.cn-usp-card{ text-align:center; background:#fff; border:1px solid var(--cn-line); border-radius: var(--cn-radius-lg); padding: 38px 26px; }
.cn-usp-card h3{ margin-bottom:.5em; }
.cn-usp-card p{ color: var(--cn-ink-soft); font-size:.92rem; margin:0; }
@media (max-width: 880px){ .cn-usp-grid{ grid-template-columns:1fr; } }

/* News list */
.cn-news-list{ max-width: 780px; margin: 0 auto; border-top:1px solid var(--cn-line); }
.cn-news-item{ display:flex; gap:24px; padding: 18px 0; border-bottom:1px solid var(--cn-line); align-items:baseline; }
.cn-news-date{ font-family: var(--cn-font-display); color: var(--cn-green); flex-shrink:0; width:110px; }
.cn-news-title{ color: var(--cn-ink); }
.cn-news-title:hover{ color: var(--cn-green); }

/* Portfolio / case studies grid */
.cn-case-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.cn-case-card{ border-radius: var(--cn-radius); overflow:hidden; background:#fff; border:1px solid var(--cn-line); transition: box-shadow .2s ease, transform .2s ease; }
.cn-case-card:hover{ box-shadow: var(--cn-shadow); transform: translateY(-4px); }
.cn-case-thumb{ aspect-ratio: 4/3; overflow:hidden; background: var(--cn-tint); }
.cn-case-thumb img{ width:100%; height:100%; object-fit:cover; }
.cn-case-body{ padding: 16px 18px; }
.cn-case-tag{ display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.05em; background: var(--cn-tint-deep); color: var(--cn-green-deep); padding:3px 10px; border-radius:999px; margin-bottom:8px; }
@media (max-width: 980px){ .cn-case-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .cn-case-grid{ grid-template-columns: 1fr; } }

/* About / philosophy split */
.cn-about{ background: var(--cn-white); }
.cn-about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.cn-about-grid img{ border-radius: var(--cn-radius-lg); box-shadow: var(--cn-shadow); }
@media (max-width: 880px){ .cn-about-grid{ grid-template-columns:1fr; } }

/* CTA band */
.cn-cta{ background: var(--cn-tint); padding: 60px 0; text-align:center; }
.cn-cta-buttons{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top: 22px; }

/* =========================================================
   PAGE TEMPLATES (About / Contact)
   ========================================================= */
.cn-contact-cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:20px; max-width:920px; margin:0 auto; }
.cn-contact-card{ text-align:center; background:#fff; border:1px solid var(--cn-line); border-radius: var(--cn-radius-lg); padding:30px 22px; }
.cn-contact-card .cn-ico{ font-size:1.9rem; line-height:1; }
.cn-contact-card h3{ margin:.5em 0 .25em; }
.cn-contact-card p, .cn-contact-card a{ color: var(--cn-ink-soft); margin:0; }
.cn-contact-card a:hover{ color: var(--cn-green); }

.cn-profile{ width:100%; border-collapse:collapse; max-width:760px; margin:0 auto; }
.cn-profile th, .cn-profile td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--cn-line); vertical-align:top; }
.cn-profile th{ width:160px; color: var(--cn-green-deep); font-family: var(--cn-font-display); font-weight:600; white-space:nowrap; }
@media (max-width: 620px){
  .cn-profile th{ display:block; width:auto; border:none; padding-bottom:0; }
  .cn-profile td{ display:block; padding-top:4px; }
}

/*
 * Full-bleed breakout: HybridMag centers content in .content-area.hm-container
 * (~1200px). Cosmo's hero + tinted bands run edge-to-edge on wide screens.
 * ponytail: classic 100vw breakout; can add a few px of horizontal scroll if
 * the OS scrollbar isn't overlay-style — revisit with a scrollbar-width fix
 * only if actually reported.
 */
.cn-hero,
.cn-section.tint,
.cn-cta{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}