// Popular Saints — featured hero + V3-style 3-col card grid (no chips).

const POP_SAINTS = [
{ slug: "saint-carlo", name: "St. Carlo", epithet: "Acutis", years: "1991–2006", feast: "Oct 12", tag: "Patron of the Internet · Eucharistic miracles", initial: "C", hue: "#1d2330", image: (typeof window !== "undefined" && window.__resources && window.__resources.carloPortrait) || "assets/carlo-acutis-portrait.png", imagePosition: "52% 34%", title: "Patron of the Internet", deck: "A London-born teenager who built websites in his spare time, catalogued every reported Eucharistic miracle in history, and died of leukaemia at fifteen. Canonized in 2025 — the first millennial saint, and the patron the Church has given the digital age." },
{ slug: "saint-augustine", name: "St. Augustine", epithet: "of Hippo", years: "354–430", feast: "Aug 28", image: "assets/saint-augustine.png", imagePosition: "center 25%", tag: "Conversion · Doctor of the Church", initial: "A", hue: "#2a5fb8" },
{ slug: "saint-francis", name: "St. Francis", epithet: "of Assisi", years: "1181–1226", feast: "Oct 4", image: "assets/saint-francis.png", imagePosition: "center 25%", tag: "Poverty · Stigmatic", initial: "F", hue: "#3a4f6e" },
{ slug: "saint-therese", name: "St. Thérèse", epithet: "of Lisieux", years: "1873–1897", feast: "Oct 1", tag: "Little Way · Doctor of the Church", initial: "T", hue: "#7a2222" },
{ slug: "saint-teresa", name: "St. Teresa", epithet: "of Ávila", years: "1515–1582", feast: "Oct 15", tag: "Mystic · Reformer", initial: "T", hue: "#5b1414" },
{ slug: "saint-thomas", name: "St. Thomas", epithet: "Aquinas", years: "1225–1274", feast: "Jan 28", image: "assets/saint-thomas.png", imagePosition: "center 25%", tag: "Doctor Angelicus", initial: "T", hue: "#1d2330" },
{ slug: "saint-john-cross", name: "St. John", epithet: "of the Cross", years: "1542–1591", feast: "Dec 14", tag: "Dark Night · Reformer", initial: "J", hue: "#3a4f6e" },
{ slug: "saint-maria-goretti", name: "St. Maria", epithet: "Goretti", years: "1890–1902", feast: "Jul 6", tag: "Martyr at twelve", initial: "M", hue: "#7a2222" },
{ slug: "saint-maximilian", name: "St. Maximilian", epithet: "Kolbe", years: "1894–1941", feast: "Aug 14", tag: "Auschwitz · Martyr of charity", initial: "M", hue: "#2a5fb8" },
{ slug: "saint-catherine", name: "St. Catherine", epithet: "of Siena", years: "1347–1380", feast: "Apr 29", tag: "Mystic · Doctor of the Church", initial: "C", hue: "#5b1414" },
{ slug: "saint-ignatius", name: "St. Ignatius", epithet: "of Loyola", years: "1491–1556", feast: "Jul 31", image: "assets/saint-ignatius.png", imagePosition: "center 25%", tag: "Founder of the Jesuits", initial: "I", hue: "#3a4f6e" },
{ slug: "saint-joan", name: "St. Joan", epithet: "of Arc", years: "1412–1431", feast: "May 30", tag: "Maid of Orléans", initial: "J", hue: "#7a2222" },
{ slug: "saint-padre-pio", name: "St. Padre Pio", epithet: "of Pietrelcina", years: "1887–1968", feast: "Sep 23", tag: "Stigmatic · Confessor", initial: "P", hue: "#2a5fb8" }];


function PopPortrait({ saint, ratio = "3/4" }) {
  if (saint.image) {
    return (
      <div style={{
        aspectRatio: ratio, width: "100%",
        background: "#fafafa", position: "relative", overflow: "hidden",
        borderRadius: 16,
        boxShadow: "0 24px 60px -16px rgba(14,22,34,0.32), 0 10px 24px -10px rgba(14,22,34,0.18)"
      }}>
        <img
          src={saint.image}
          alt={`${saint.name} ${saint.epithet}`}
          loading="eager"
          decoding="async"
          fetchpriority="high"
          style={{
            position: "absolute", inset: 0,
            width: "100%", height: "100%",
            objectFit: "cover",
            objectPosition: saint.imagePosition || "center",
            display: "block"
          }} />
        <div style={{ position: "absolute", top: 14, right: 16, fontSize: 10, letterSpacing: "0.32em", textTransform: "uppercase", opacity: 0.75, color: "rgba(20,20,28,0.7)", mixBlendMode: "multiply" }}></div>
      </div>);
  }

  return (
    <div style={{
      aspectRatio: ratio, width: "100%",
      background: "#fafafa", position: "relative", overflow: "hidden",
      borderRadius: 16
    }}>
      <img
        src={(typeof window !== "undefined" && window.__resources && window.__resources.saintPlaceholder) || "assets/saint-placeholder.png"}
        alt={`${saint.name} ${saint.epithet}`}
        loading="lazy"
        decoding="async"
        style={{
          position: "absolute", inset: 0,
          width: "100%", height: "100%",
          objectFit: "cover",
          objectPosition: "center",
          display: "block"
        }} />
    </div>);

}

function PopularSaints({ onNavigate }) {
  const featured = POP_SAINTS[0];
  const rest = POP_SAINTS.slice(1);

  return (
    <section className="pop-saints">
      <div className="pop-eyebrow">
        <span className="pop-eyebrow-mark"></span>
        <span></span>
      </div>

      <article className="pop-hero">
        <div className="pop-hero-img"><PopPortrait saint={featured} ratio="4/5" /></div>
        <div className="pop-hero-copy">
          <h1 className="pop-hero-name" style={{ fontWeight: "300" }}>
            {featured.name}<br />
            <span className="pop-hero-epithet">{featured.epithet}</span>
          </h1>
          <div className="pop-hero-meta">
            <span>{featured.years}</span>
            <span>Feast {featured.feast}</span>
            <span>{featured.title || "Doctor of the Church"}</span>
          </div>
          <p className="pop-hero-deck">
            {featured.deck || "A sheltered French girl who entered a convent at fifteen, died of tuberculosis at twenty-four, and quietly proposed a path to holiness — the \"little way\" — that the modern Church has taken increasingly seriously every decade since."}
          </p>
          <a
            href={"#" + featured.slug}
            className="pop-hero-link"
            onClick={(e) => {e.preventDefault();onNavigate && onNavigate(featured.slug);}}>
            Read his life
          </a>
        </div>
      </article>

      <h2 className="pop-section-title">What others are reading</h2>

      <div className="pop-grid">
        {rest.map((s) =>
        <article
          key={s.name}
          className="pop-card"
          role="button"
          tabIndex={0}
          onClick={() => s.slug && onNavigate && onNavigate(s.slug)}
          onKeyDown={(e) => {
            if (s.slug && (e.key === "Enter" || e.key === " ")) {
              e.preventDefault();
              onNavigate && onNavigate(s.slug);
            }
          }}>
            <div className="pop-card-portrait">
              <PopPortrait saint={s} ratio="1/1" />
            </div>
            <div className="pop-card-hover">
              <div className="pop-card-years">{s.years}</div>
              <h3 className="pop-card-name">
                {s.name}<br />
                <span className="pop-card-ep">{s.epithet}</span>
              </h3>
              <div className="pop-card-tag">{s.tag}</div>
            </div>
          </article>
        )}
      </div>

      <style>{`
        .pop-saints {
          max-width: 1240px; margin: 0 auto;
          padding: clamp(32px, 5vh, 64px) clamp(24px, 5vw, 72px) clamp(80px, 10vh, 120px);
          font-family: var(--font-body); color: var(--ink);
        }
        .pop-eyebrow {
          display: flex; align-items: center; justify-content: center; gap: 12px;
          font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
          color: var(--ink-mute); margin-bottom: 48px;
        }
        .pop-eyebrow-mark { color: var(--accent); font-size: 14px; }

        .pop-hero {
          display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 5vw, 72px);
          align-items: center;
          padding: clamp(24px, 4vh, 40px) 0 clamp(48px, 8vh, 68px);
          margin-bottom: clamp(40px, 6vh, 64px);
        }
        .pop-hero-img { max-width: 440px; width: 100%; }
        .pop-hero-tag {
          display: inline-flex; align-items: center; gap: 12px;
          font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
          color: var(--accent); margin-bottom: 20px;
        }
        .pop-hero-tag-rule { width: 28px; height: 1px; background: var(--accent); display: inline-block; }
        .pop-hero-name {
          font-family: var(--font-display); font-weight: 500;
          font-size: clamp(40px, 6vw, 72px); margin: 0 0 28px;
          letter-spacing: -0.025em; line-height: 0.98;
        }
        .pop-hero-epithet { color: #0e1622; font-weight: 400; }
        .pop-hero-meta {
          display: flex; flex-wrap: wrap; gap: 18px 28px;
          font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
          color: #73787f; margin-bottom: 24px;
        }
        .pop-hero-deck {
          font-size: clamp(15px, 1.3vw, 17px); line-height: 1.6;
          color: #0e1622; font-weight: 300;
          margin: 0 0 28px; max-width: 520px;
        }
        .pop-hero-link {
          display: inline-flex; align-items: center;
          color: var(--ink); text-decoration: none;
          font-size: 13px; font-weight: 500;
          padding: 12px 22px;
          border: 1px solid rgba(14, 22, 34, 0.45);
          border-radius: 999px;
          background: transparent;
          transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
          cursor: pointer;
        }
        .pop-hero-link:hover {
          color: var(--accent);
          border-color: var(--accent);
        }
        .pop-hero-link:active {
          background: rgba(42, 95, 184, 0.06);
        }
        .pop-hero-link:focus-visible {
          outline: 2px solid var(--accent);
          outline-offset: 3px;
        }

        .pop-section-title {
          font-family: var(--font-display); font-weight: 400;
          font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.015em;
          line-height: 1.15;
          margin: clamp(24px, 4vh, 40px) 0 clamp(20px, 3vh, 28px);
          color: var(--ink);
        }

        .pop-grid {
          display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
        }
        .pop-card {
          position: relative; overflow: hidden; cursor: pointer;
          background: #ffffff;
          border-radius: 16px;
          box-shadow: 0 10px 30px -12px rgba(14,22,34,0.22), 0 4px 12px -6px rgba(14,22,34,0.10);
          transition: box-shadow 240ms cubic-bezier(.4,0,.2,1), transform 240ms cubic-bezier(.4,0,.2,1);
        }
        .pop-card:hover {
          box-shadow: 0 24px 60px -16px rgba(14,22,34,0.32), 0 10px 24px -10px rgba(14,22,34,0.18);
          transform: translateY(-2px);
        }
        .pop-card-portrait {
          width: 100%;
        }
        .pop-card-hover {
          position: absolute; inset: 0;
          display: flex; flex-direction: column; justify-content: flex-end;
          padding: 18px 18px 16px;
          background: linear-gradient(
            to top,
            rgba(14,22,34,0.92) 0%,
            rgba(14,22,34,0.78) 38%,
            rgba(14,22,34,0.0) 70%
          );
          color: #f5f7fb;
          opacity: 0;
          transition: opacity 220ms ease;
          pointer-events: none;
        }
        .pop-card:hover .pop-card-hover,
        .pop-card:focus-within .pop-card-hover { opacity: 1; }
        .pop-card-years {
          font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
          color: rgba(255,255,255,0.78); margin-bottom: 8px;
        }
        .pop-card-name {
          font-family: var(--font-display); font-weight: 500;
          font-size: 20px; margin: 0 0 8px; line-height: 1.15; letter-spacing: -0.01em;
          color: #ffffff;
        }
        .pop-card-ep { color: rgba(255,255,255,0.7); font-weight: 400; }
        .pop-card-tag {
          font-size: 12px; line-height: 1.4;
          color: rgba(255,255,255,0.82);
        }

        @media (max-width: 900px) {
          .pop-hero { grid-template-columns: 1fr; }
          .pop-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
        }
        @media (max-width: 640px) {
          .pop-saints { padding-top: 10px; }
          .pop-hero { padding-top: 10px; }
          .pop-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
        }
      `}</style>
    </section>);

}

// ── Find by Circumstance — chips + filtered card grid, for Topics & Themes ──
const CIRC_SAINTS = [
{ name: "St. Carlo", epithet: "Acutis", years: "1991–2006", image: "assets/carlo-acutis-portrait.png", imagePosition: "52% 34%", tag: "Patron of the Internet · First millennial saint", initial: "C", hue: "#1d2330", route: "saint-carlo", themes: ["Youth", "Suffering illness", "Ordinary life", "Youth", "Youth", "Youth"] },
{ name: "St. John", epithet: "of Matha", years: "1160–1213", image: "assets/saint-john-matha.png", imagePosition: "center 25%", tag: "Founder · Ransomer of Captives", initial: "J", hue: "#1d2330", route: "saint", themes: ["Ordinary life", "Conversion", "Charity"] },
{ name: "St. Augustine", epithet: "of Hippo", years: "354–430", image: "assets/saint-augustine.png", imagePosition: "center 25%", tag: "Conversion · Doctor of the Church", initial: "A", hue: "#2a5fb8", route: "saint-augustine", themes: ["Conversion", "Thinking clearly about faith", "Grieving"] },
{ name: "St. Francis", epithet: "of Assisi", years: "1181–1226", image: "assets/saint-francis.png", imagePosition: "center 25%", tag: "Poverty · Stigmatic", initial: "F", hue: "#3a4f6e", route: "saint-francis", themes: ["Conversion", "Charity", "Ordinary life"] },
{ name: "St. Thérèse", epithet: "of Lisieux", years: "1873–1897", tag: "Little Way · Doctor of the Church", initial: "T", hue: "#7a2222", route: "saint-therese", themes: ["Ordinary life", "Doubt & dryness", "Suffering illness"] },
{ name: "St. Teresa", epithet: "of Ávila", years: "1515–1582", tag: "Mystic · Reformer", initial: "T", hue: "#5b1414", route: "saint-teresa", themes: ["Doubt & dryness", "Thinking clearly about faith"] },
{ name: "St. Thomas", epithet: "Aquinas", years: "1225–1274", image: "assets/saint-thomas.png", imagePosition: "center 25%", tag: "Doctor Angelicus", initial: "T", hue: "#1d2330", route: "saint-thomas", themes: ["Thinking clearly about faith"] },
{ name: "St. John", epithet: "of the Cross", years: "1542–1591", tag: "Dark Night · Reformer", initial: "J", hue: "#3a4f6e", route: "saint-john-cross", themes: ["Doubt & dryness"] },
{ name: "St. Maria", epithet: "Goretti", years: "1890–1902", tag: "Martyr at twelve", initial: "M", hue: "#7a2222", route: "saint-maria-goretti", themes: ["Forgiveness", "Suffering illness"] },
{ name: "St. Maximilian", epithet: "Kolbe", years: "1894–1941", tag: "Auschwitz · Martyr of charity", initial: "M", hue: "#2a5fb8", route: "saint-maximilian", themes: ["Forgiveness", "Charity"] },
{ name: "St. Catherine", epithet: "of Siena", years: "1347–1380", tag: "Mystic · Doctor of the Church", initial: "C", hue: "#5b1414", route: "saint-catherine", themes: ["Thinking clearly about faith", "Doubt & dryness"] },
{ name: "St. Ignatius", epithet: "of Loyola", years: "1491–1556", image: "assets/saint-ignatius.png", imagePosition: "center 25%", tag: "Founder of the Jesuits", initial: "I", hue: "#3a4f6e", route: "saint-ignatius", themes: ["Conversion", "Ordinary life"] },
{ name: "St. Joan", epithet: "of Arc", years: "1412–1431", tag: "Maid of Orléans", initial: "J", hue: "#7a2222", route: "saint-joan", themes: ["Doubt & dryness"] },
{ name: "St. Padre Pio", epithet: "of Pietrelcina", years: "1887–1968", tag: "Stigmatic · Confessor", initial: "P", hue: "#2a5fb8", route: "saint-padre-pio", themes: ["Suffering illness", "Forgiveness"] },

// 19th–20th century additions
{ name: "St. Katharine", epithet: "Drexel", years: "1858–1955", image: "assets/saint-katharine-drexel.png", imagePosition: "center 25%", image: "assets/saint-katharine-drexel.png", imagePosition: "center 25%", tag: "Heiress · Founder of schools", initial: "K", hue: "#3a4f6e", route: "saint-katharine-drexel", themes: ["Conversion", "Charity", "Ordinary life"] },
{ name: "St. Teresa", epithet: "of Calcutta", years: "1910–1997", tag: "Missionaries of Charity", initial: "T", hue: "#1d2330", route: "saint-teresa-calcutta", themes: ["Doubt & dryness", "Charity", "Ordinary life"] },
{ name: "St. Edith", epithet: "Stein", years: "1891–1942", image: "assets/saint-edith-stein.png", imagePosition: "center 25%", image: "assets/saint-edith-stein.png", imagePosition: "center 25%", tag: "Philosopher · Martyr at Auschwitz", initial: "E", hue: "#2a5fb8", route: "saint-edith-stein", themes: ["Conversion", "Thinking clearly about faith", "Forgiveness"] },
{ name: "St. Josephine", epithet: "Bakhita", years: "1869–1947", tag: "From slavery to the Canossians", initial: "B", hue: "#5b1414", route: "saint-bakhita", themes: ["Forgiveness", "Conversion", "Suffering illness"] },
{ name: "St. Bernadette", epithet: "Soubirous", years: "1844–1879", tag: "Visionary of Lourdes", initial: "B", hue: "#3a4f6e", route: "saint-bernadette", themes: ["Suffering illness", "Ordinary life", "Doubt & dryness"] },
{ name: "St. Gianna", epithet: "Beretta Molla", years: "1922–1962", tag: "Pediatrician · Mother", initial: "G", hue: "#7a2222", route: "saint-gianna", themes: ["Suffering illness", "Ordinary life", "Charity"] },
{ name: "St. Pier Giorgio", epithet: "Frassati", years: "1901–1925", tag: "Mountaineer · Friend of the poor", initial: "P", hue: "#1d2330", route: "saint-frassati", themes: ["Ordinary life", "Charity", "Suffering illness", "Youth"] },
{ name: "St. Damien", epithet: "of Molokai", years: "1840–1889", tag: "Apostle of the lepers", initial: "D", hue: "#2a5fb8", route: "saint-damien", themes: ["Charity", "Suffering illness"] },
{ name: "St. Óscar", epithet: "Romero", years: "1917–1980", tag: "Archbishop of San Salvador", initial: "R", hue: "#5b1414", route: "saint-romero", themes: ["Forgiveness", "Charity", "Thinking clearly about faith"] },

// Korean martyrs
{ name: "St. Andrew", epithet: "Kim Taeğŏn", years: "1821–1846", tag: "First Korean priest · Martyr at twenty-five", initial: "A", hue: "#1d2330", route: "saint-andrew-kim", themes: ["Korean", "Forgiveness", "Conversion"] },
{ name: "St. Paul", epithet: "Chŏng Hasang", years: "1795–1839", tag: "Lay apostle of Korea", initial: "P", hue: "#3a4f6e", route: "saint-paul-chong", themes: ["Korean", "Ordinary life", "Forgiveness"] },
{ name: "St. Peter", epithet: "Yu Tae-chol", years: "1826–1839", tag: "Boy martyr at thirteen", initial: "P", hue: "#7a2222", route: "saint-peter-yu", themes: ["Korean", "Forgiveness", "Ordinary life", "Youth"] }];


const CIRCUMSTANCES = ["Conversion", "Doubt & dryness", "Forgiveness", "Grieving", "Charity", "Ordinary life", "Suffering illness", "Thinking clearly about faith", "Korean", "Youth", "All"];

function FindByCircumstance({ onNavigate }) {
  const [filter, setFilter] = React.useState("Conversion");
  const filtered = filter === "All" ? CIRC_SAINTS : CIRC_SAINTS.filter((s) => s.themes.includes(filter));

  return (
    <section className="circ-wrap">
      <div className="circ-layout">
        <aside className="circ-side">
          <div className="circ-head">
            <h2 className="circ-title" style={{ fontSize: "24px" }}>Find a saint by what you're carrying.</h2>
            <p className="circ-deck">
              Choose a circumstance that resembles yours — not a virtue you've achieved.
              The right saint to read first is often the one whose situation rhymes with your own.
            </p>
          </div>

          <div className="circ-filter">
            <div className="circ-section-head">
              <span></span>
            </div>

            <div className="circ-chips">
              {CIRCUMSTANCES.map((c) => {
                const count = c === "All" ? CIRC_SAINTS.length : CIRC_SAINTS.filter((s) => s.themes.includes(c)).length;
                const active = filter === c;
                return (
                  <button
                    key={c}
                    className={"circ-chip" + (active ? " is-active" : "")}
                    onClick={() => setFilter(c)}>
                    {c}
                    <span className="circ-chip-count">{count}</span>
                  </button>);

              })}
            </div>
          </div>
        </aside>

        <div className="circ-grid">
          {filtered.map((s) =>
          <article
            key={s.name + " " + s.epithet}
            className={"circ-card" + (s.route ? " is-clickable" : "")}
            onClick={() => s.route && onNavigate && onNavigate(s.route)}
            role={s.route ? "button" : undefined}
            tabIndex={s.route ? 0 : undefined}
            onKeyDown={(e) => {
              if (s.route && (e.key === "Enter" || e.key === " ")) {
                e.preventDefault();
                onNavigate && onNavigate(s.route);
              }
            }}>
              <div className="circ-card-img"><PopPortrait saint={s} ratio="1/1" /></div>
              <div className="circ-card-body">
                <div className="circ-card-years" style={{ color: s.hue }}>{s.years}</div>
                <h3 className="circ-card-name">
                  {s.name}<br />
                  <span className="circ-card-ep">{s.epithet}</span>
                </h3>
                <div className="circ-card-tag">{s.tag}</div>
              </div>
            </article>
          )}
        </div>
      </div>

      <style>{`
        .circ-wrap {
          max-width: 1240px; margin: 0 auto;
          padding: clamp(64px, 10vh, 120px) clamp(24px, 5vw, 72px) 0;
          font-family: var(--font-body); color: var(--ink);
        }
        .circ-layout {
          display: grid;
          grid-template-columns: minmax(360px, 480px) minmax(0, 1fr);
          gap: clamp(40px, 6vw, 80px);
          align-items: start;
          min-height: calc(100vh - clamp(80px, 12vh, 120px));
        }
        .circ-grid {
          max-width: 620px;
          width: 100%;
        }
        .circ-side {
          position: sticky;
          top: clamp(80px, 12vh, 120px);
          align-self: start;
          max-height: calc(100vh - clamp(100px, 14vh, 140px));
          overflow-y: auto;
          padding-right: 4px;
          display: flex; flex-direction: column;
          gap: clamp(28px, 4vh, 40px);
        }
        .circ-side::-webkit-scrollbar { display: none; }
        .circ-side { scrollbar-width: none; }
        .circ-head { margin-bottom: 0; }
        .circ-title {
          font-family: var(--font-display); font-weight: 500;
          font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -0.02em;
          line-height: 1.0; margin: 0 0 16px;
          text-wrap: balance;
        }
        .circ-deck {
          font-size: clamp(14px, 1.2vw, 16px); line-height: 1.6;
          color: var(--ink-mute); margin: 0;
        }
        .circ-filter { display: flex; flex-direction: column; }
        .circ-section-head {
          display: flex; justify-content: space-between; align-items: baseline;
          font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
          color: var(--ink-mute); margin-bottom: 14px;
        }
        .circ-count { color: var(--accent); }
        .circ-chips {
          display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
          margin-bottom: 0; padding-bottom: 0;
          border-bottom: 0;
        }

        @media (max-width: 860px) {
          .circ-layout {
            grid-template-columns: 1fr;
            gap: 32px;
            min-height: 0;
          }
          .circ-side {
            position: static;
            max-height: none;
            overflow-y: visible;
          }
          .circ-chips {
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
          }
        }
        .circ-chip {
          appearance: none; cursor: pointer;
          border: 1px solid var(--bg-deep); background: transparent;
          color: var(--ink-soft);
          padding: 9px 14px; border-radius: 999px;
          font-family: var(--font-body); font-size: 12px; letter-spacing: 0.04em;
          display: inline-flex; align-items: center; gap: 8px;
          transition: background 160ms, color 160ms, border-color 160ms;
        }
        .circ-chip:hover { border-color: var(--ink); }
        .circ-chip.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
        .circ-chip-count { font-size: 10px; opacity: 0.6; }

        .circ-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 24px;
          padding-bottom: clamp(80px, 10vh, 120px);
        }
        .circ-card {
          background: #ffffff;
          border-radius: 16px;
          padding: 20px; display: flex; gap: 18px; cursor: pointer;
          overflow: hidden;
          box-shadow: 0 10px 30px -12px rgba(14,22,34,0.22), 0 4px 12px -6px rgba(14,22,34,0.10);
          transition: box-shadow 240ms cubic-bezier(.4,0,.2,1), transform 240ms cubic-bezier(.4,0,.2,1);
        }
        .circ-card:hover {
          box-shadow: 0 24px 60px -16px rgba(14,22,34,0.32), 0 10px 24px -10px rgba(14,22,34,0.18);
          transform: translateY(-2px);
        }
        .circ-card-img { width: 160px; flex-shrink: 0; }
        .circ-card-img > div { background: #fafafa !important; box-shadow: none !important; }
        .circ-card-body { display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-width: 0; }
        .circ-card-years { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 6px; }
        .circ-card-name {
          font-family: var(--font-display); font-weight: 500;
          font-size: 26px; margin: 0; line-height: 1.15; letter-spacing: -0.015em;
        }
        .circ-card-ep { color: var(--ink-mute); font-weight: 400; }
        .circ-card-tag { font-size: 12px; color: var(--ink-mute); line-height: 1.4; margin-top: 8px; }
        .circ-card.is-clickable { cursor: pointer; }
        .circ-card-cta {
          margin-top: 12px;
          font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
          color: var(--accent); font-weight: 600;
          transition: letter-spacing 200ms;
        }
        .circ-card.is-clickable:hover .circ-card-cta { letter-spacing: 0.36em; }

        @media (max-width: 900px) { .circ-grid { grid-template-columns: 1fr; } }
        @media (max-width: 640px) { .circ-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>);

}

window.PopularSaints = PopularSaints;
window.FindByCircumstance = FindByCircumstance;