/* ===== pages.css — heróis e secções específicas ===== */

/* ---- Hero (home) ---- */
.hero { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 110px); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 90% at 88% 0%, rgba(225,58,78,.16), transparent 55%),
    radial-gradient(80% 90% at 0% 100%, rgba(28,138,85,.18), transparent 55%),
    var(--paper);
}
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero h1 { margin: 1rem 0 1.1rem; }
.hero h1 span { color: var(--red-600); }
.hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero__stats { display: flex; gap: clamp(18px, 3vw, 40px); margin-top: 2.2rem; flex-wrap: wrap; }

/* hero visual — CSS stadium card */
.hero__visual {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  min-height: 420px; box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.hero__visual .badge { position: absolute; z-index: 3; }
.stadium {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% 120%, var(--green-500), var(--green-800) 70%);
}
.stadium__field {
  position: absolute; left: 50%; bottom: -8%; transform: translateX(-50%) perspective(600px) rotateX(52deg);
  width: 78%; height: 64%;
  background: repeating-linear-gradient(90deg, #1c8a55 0 12%, #157347 12% 24%);
  border: 3px solid rgba(255,255,255,.7); border-radius: 8px;
  box-shadow: 0 0 80px rgba(0,0,0,.3);
}
.stadium__center { position: absolute; left: 50%; top: 44%; transform: translateX(-50%); width: 110px; height: 110px; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; }
.stadium__line { position: absolute; left: 10%; right: 10%; top: 44%; height: 2px; background: rgba(255,255,255,.7); }
.stadium__lights { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1.4px); background-size: 30px 30px; opacity: .25; }
.stadium__sun { position: absolute; top: 8%; right: 12%; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff, var(--red-400)); filter: blur(2px); box-shadow: 0 0 70px var(--red-500); }

/* ---- Page header (interior) ---- */
.page-head { position: relative; overflow: hidden; color: #fff; padding-block: clamp(56px, 8vw, 96px); }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.page-head--green::before { background: radial-gradient(80% 120% at 80% 0%, var(--green-600), transparent 60%), linear-gradient(135deg, var(--green-800), var(--green-900)); }
.page-head--red::before { background: radial-gradient(80% 120% at 20% 0%, var(--red-500), transparent 60%), linear-gradient(135deg, var(--green-900), var(--red-700)); }
.page-head--mix::before { background: radial-gradient(70% 100% at 90% 10%, var(--red-500), transparent 55%), linear-gradient(135deg, var(--green-700), var(--green-900)); }
.page-head__pattern { position: absolute; inset: 0; z-index: 1; background-image: radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.6px); background-size: 26px 26px; opacity: .6; }
.page-head .container { position: relative; z-index: 2; }
.page-head h1 { color: #fff; margin: 1rem 0 .8rem; max-width: 20ch; }
.page-head .lead { color: rgba(255,255,255,.86); }
.page-head .eyebrow { color: #fff; }
.page-head .eyebrow::before { background: #fff; }
.breadcrumb { display: flex; gap: .5rem; font-size: .85rem; color: rgba(255,255,255,.75); font-family: var(--font-display); }
.breadcrumb a { color: rgba(255,255,255,.9); }
.breadcrumb span { color: rgba(255,255,255,.55); }

/* ---- Article (longform) ---- */
.prose { font-size: 1.06rem; }
.prose > h2 { margin: 2.2rem 0 .9rem; }
.prose > h3 { margin: 1.6rem 0 .6rem; color: var(--green-800); }
.prose > p { margin-bottom: 1.1rem; }
.prose > ul, .prose > ol { margin: 0 0 1.2rem; }
.prose figure { margin: 1.6rem 0; }
.prose figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: .5rem; text-align: center; }
.prose .lead-in::first-letter {
  font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; float: left;
  line-height: .8; padding: .25rem .6rem .1rem 0; color: var(--red-600);
}

.article-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; color: var(--ink-soft); font-size: .9rem; font-family: var(--font-display); margin-top: 1.2rem; }
.article-meta .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--green-500), var(--red-500)); display: grid; place-items: center; color: #fff; font-weight: 700; }

.toc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.toc h4 { margin-bottom: .7rem; color: var(--green-900); }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { counter-increment: toc; margin: .5rem 0; padding-left: 1.8rem; position: relative; font-size: .92rem; }
.toc li::before { content: counter(toc); position: absolute; left: 0; top: 0; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--green-300); color: var(--green-900); font-family: var(--font-display); font-weight: 700; font-size: .72rem; display: grid; place-items: center; }
.toc a { color: var(--ink-soft); }
.toc a:hover { color: var(--red-600); }

/* ---- Profile (talent) ---- */
.profile-hero { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.profile-photo {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 360px;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.2);
}
.profile-photo .num { position: absolute; right: 14px; bottom: 8px; font-family: var(--font-display); font-weight: 800; font-size: 5rem; color: rgba(255,255,255,.85); line-height: 1; }
.profile-photo .pos { position: absolute; left: 14px; top: 14px; }
.profile-figure {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 60%; height: 80%;
  background: radial-gradient(60% 40% at 50% 18%, rgba(255,255,255,.95), rgba(255,255,255,.7) 40%, transparent 60%);
  border-radius: 50% 50% 0 0; filter: blur(1px);
}

/* ---- CTA band ---- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 64px); color: #fff; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(115deg, var(--green-700), var(--green-900) 60%, var(--red-700)); }
.cta-band__pattern { position: absolute; inset: 0; z-index: 1; background-image: radial-gradient(rgba(255,255,255,.16) 1.5px, transparent 1.6px); background-size: 24px 24px; opacity: .5; }
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.88); max-width: 52ch; }

/* ---- Contact cards ---- */
.contact-card { display: flex; gap: 1rem; align-items: flex-start; }
.contact-card .iconc { margin-bottom: 0; }
.contact-card .ck { font-family: var(--font-display); font-weight: 600; color: var(--green-900); }
.contact-card .cv { color: var(--ink-soft); font-size: .95rem; }
.contact-card a.cv:hover { color: var(--red-600); }

/* ---- Map placeholder (CSS) ---- */
.map-art { position: relative; min-height: 280px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.map-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--green-300), var(--paper-2)); }
.map-art::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(15,81,50,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(15,81,50,.12) 1px, transparent 1px); background-size: 34px 34px; }
.map-pin { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-100%); z-index: 2; color: var(--red-600); }

/* ---- About values ---- */
.value { display: flex; gap: 1rem; }
.value .iconc { margin-bottom: 0; }

/* ---- Photos (real imagery) ---- */
.photo { display: block; width: 100%; height: 100%; object-fit: cover; }

/* hero visual: real photo under the CSS stadium glow */
.hero__visual .hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
}
.hero__visual .hero-scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(160deg, rgba(6,41,26,.30), rgba(6,41,26,.72));
}
/* keep the CSS stadium as a translucent graphic layer over the photo */
.hero__visual .stadium { z-index: 3; background: none; mix-blend-mode: screen; opacity: .55; }
.hero__visual .badge { z-index: 4; }

/* feature card photo background */
.card--feature .card-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}

/* media frame for section illustrations / cards */
.media {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--paper-2);
}
.media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media--wide { aspect-ratio: 16 / 9; }
.media--card { aspect-ratio: 4 / 3; }
.media--tall { aspect-ratio: 3 / 4; }

/* profile hero: real photo fills the figure frame */
.profile-photo .profile-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; z-index: 1;
}
.profile-photo .profile-scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(6,41,26,.10) 40%, rgba(6,41,26,.72) 100%);
}
.profile-photo .pos, .profile-photo .num { z-index: 3; }

/* small gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 20px); margin-top: 1.6rem; }
@media (max-width: 720px) { .gallery { grid-template-columns: 1fr 1fr; } }

@media (max-width: 720px) {
  .hero__grid, .profile-hero { grid-template-columns: 1fr; }
  .hero__visual { min-height: 320px; }
  .profile-hero .profile-photo { min-height: 300px; }
}