/* =========================================================
   Chakradhari — Section-specific styles
   Statement, ethos, approach, research, learn, partnerships,
   about, contact, footer. Card-level rules live in
   css/components/cards.css; this file is band-level layout.
   ========================================================= */
@layer components {

  /* ---------- Statement band ---------- */
  .statement { background: var(--night); border-block: 1px solid var(--line); position: relative; }
  .statement .wrap { padding-block: clamp(4rem, 9vw, 7rem); }
  .statement p {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 3.6vw, 2.9rem);
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: var(--white);
    max-width: 24ch;
    margin-top: 1.4rem;
    font-weight: 420;
  }
  .statement p em { font-style: italic; color: var(--blue-bright); }
  .statement .sub { font-family: var(--sans); font-size: 1.05rem; color: var(--text-soft); max-width: 46rem; margin-top: 2rem; letter-spacing: 0; line-height: 1.6; }
  .pillar-strip {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    margin-top: clamp(2.4rem, 5vw, 3.5rem); border: 1px solid var(--line); background: var(--line);
  }
  .pillar-strip article {
    background: var(--night); padding: clamp(1.3rem, 2.5vw, 1.8rem); min-height: 150px;
    box-shadow: inset 0 0 0 rgba(46,155,255,0); transition: box-shadow .6s var(--ease), background .6s var(--ease);
  }
  .pillar-strip article.is-active { box-shadow: inset 0 1px 0 var(--line-blue), inset 0 0 40px -20px var(--glow-blue); }
  .pillar-strip span { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--blue); text-transform: uppercase; }
  .pillar-strip p { font-family: var(--sans); font-size: 1rem; line-height: 1.55; letter-spacing: 0; color: var(--text-soft); max-width: 22rem; margin-top: 0.8rem; }
  @media (max-width: 960px) { .pillar-strip { grid-template-columns: 1fr; } }

  /* ---------- Ethos / the name ---------- */
  .ethos { background: var(--bg-2); }
  .ethos-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  .carry-list { list-style: none; }
  .carry-list li {
    font-family: var(--serif); font-size: clamp(1.25rem, 2.5vw, 1.85rem); letter-spacing: -0.02em;
    color: var(--white); line-height: 1.25; padding: 1.05rem 0; border-top: 1px solid var(--line);
    display: flex; align-items: baseline;
  }
  .carry-list li:last-child { border-bottom: 1px solid var(--line); }
  .carry-list li::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
    box-shadow: 0 0 10px var(--glow-blue); margin-right: 1rem; flex: 0 0 auto; transform: translateY(-0.35em) scale(1);
    transition: transform .5s var(--ease-spring), box-shadow .5s var(--ease);
  }
  /* A traveling highlight down the list — knowledge being "carried" —
     driven by js/viz/sequential-highlight.js. */
  .carry-list li.is-active::before { transform: translateY(-0.35em) scale(1.9); box-shadow: 0 0 16px var(--blue-bright); }
  .carry-list li .lead { font-style: italic; font-weight: 400; color: var(--text-soft); margin-right: 0.4rem; white-space: nowrap; }
  @media (max-width: 960px) { .ethos-grid { grid-template-columns: 1fr; } }

  /* ---------- Approach ---------- */
  .approach { background: var(--bg-2); }
  .approach-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .approach-list { display: grid; gap: 1.1rem; }
  .approach-item { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
  .approach-item:last-child { border-bottom: 1px solid var(--line); }
  .approach-item .idx { font-family: var(--mono); font-size: 0.8rem; color: var(--blue); padding-top: 4px; }
  .approach-item h4 { font-size: 1.2rem; margin-bottom: 0.4rem; color: var(--white); }
  .approach-item p { color: var(--text-soft); font-size: 0.98rem; }
  .approach-right { display: flex; flex-direction: column; gap: clamp(1.6rem, 3.5vw, 2.4rem); }
  .cycle-diagram { width: 100%; max-width: 220px; margin-inline: auto; cursor: pointer; }
  .cycle-diagram svg { width: 100%; height: auto; overflow: visible; }
  .cycle-node text { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; fill: var(--text-faint); transition: fill .3s; }
  /* transform:scale, not the SVG "r" attribute — "r" is not a transitionable
     CSS property in every browser (Firefox notably), so scaling the circle's
     own bounding box is the portable way to get the same grow effect. */
  .cycle-node circle { transition: transform .3s var(--ease-spring), filter .3s; transform-box: fill-box; transform-origin: center; }
  .cycle-diagram:hover .cycle-node circle,
  .cycle-node.is-active circle { transform: scale(1.3); filter: drop-shadow(0 0 6px var(--glow-blue)); }
  .cycle-diagram:hover .cycle-node text,
  .cycle-node.is-active text { fill: var(--white); }
  .cycle-pulse { animation: cyclePulse 7s linear infinite; filter: drop-shadow(0 0 6px var(--glow-blue)); }
  @keyframes cyclePulse { to { stroke-dashoffset: -603; } }
  @media (max-width: 960px) { .approach-grid { grid-template-columns: 1fr; } }

  /* ---------- Research / roadmap ---------- */
  .research-subhead {
    display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
    margin: clamp(2rem, 4vw, 2.8rem) 0 1.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
  }
  .research-subhead:first-child { margin-top: 0; padding-top: 0; border-top: none; }
  .research-subhead h3 { font-size: 1.3rem; color: var(--white); letter-spacing: -0.01em; }
  .stage-flag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }

  /* ---------- Learn ---------- */
  .courses-band { background: var(--bg-2); }

  /* ---------- Partnerships / consulting ---------- */
  .consulting-band { background: var(--night); border-block: 1px solid var(--line); }
  .consulting-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    margin-top: 1.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  }
  .consulting-cta p { max-width: 40rem; color: var(--text-soft); font-size: 1rem; }
  @media (max-width: 960px) { .consulting-cta { align-items: flex-start; flex-direction: column; } }

  /* Restrained recurring "adapt this" pattern used after tool-relevant
     sections (Open Lab, Focus areas) — same visual family as
     .consulting-cta, not a new sales block. */
  .adapt-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    margin-top: clamp(2rem, 4vw, 2.8rem); padding-top: 1.4rem; border-top: 1px solid var(--line);
  }
  .adapt-cta p { max-width: 34rem; color: var(--text-soft); font-size: 0.98rem; }
  .adapt-cta p b { color: var(--white); font-weight: 600; }

  /* ---------- Contact ---------- */
  .contact { background: var(--bg-2); }
  .contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .contact h2 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); color: var(--white); }
  .contact-card { background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.2rem); }
  .contact-card .row { padding: 1rem 0; border-bottom: 1px solid var(--line-soft); }
  .contact-card .row:last-child { border-bottom: none; padding-bottom: 0; }
  .contact-card .row:first-child { padding-top: 0; }
  .contact-card .k { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
  .contact-card .v { margin-top: 0.35rem; color: var(--text); font-size: 0.98rem; line-height: 1.5; }
  .contact-card .v a:hover { color: var(--blue-bright); }
  @media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; gap: 2rem; } }

  /* ---------- Footer ---------- */
  .site-footer { background: var(--night); color: var(--text-soft); padding: clamp(3rem,6vw,4.5rem) 0 2.5rem; border-top: 1px solid var(--line); }
  .footer-top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
  .footer-brand { display: flex; align-items: center; gap: 0.7rem; color: var(--white); }
  .footer-brand img { width: 32px; height: 32px; border-radius: 8px; }
  .footer-brand span { font-family: var(--serif); font-size: 1.1rem; }
  .footer-nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
  .footer-nav a { font-size: 0.9rem; color: var(--text-soft); transition: color .2s; }
  .footer-nav a:hover { color: var(--white); }
  .footer-more {
    display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft);
  }
  .footer-more a { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); transition: color .2s; }
  .footer-more a:hover { color: var(--blue-bright); }
  .footer-legal { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); font-size: 0.78rem; line-height: 1.7; color: var(--text-faint); }
  .footer-legal .cin { font-family: var(--mono); letter-spacing: 0.02em; }
}