/* =========================================================
   KR — philanthropy.css (WOW / PRODUCTION)
   - Editorial layout: media left + text right
   - Sticky media (desktop) + premium cards + hero/cta FX
   - Safe reveal: only hides when JS adds .kr-reveal-ready
   ========================================================= */

.kr-phil{
  background: var(--kr-bg);
  color: var(--kr-text);
  overflow-x: clip;
}
@supports not (overflow: clip){ .kr-phil{ overflow-x: hidden; } }

.kr-phil section[id]{ scroll-margin-top: 92px; }

/* ---------------------------------------------------------
   SAFE reveal system
--------------------------------------------------------- */
.kr-phil.kr-reveal-ready [data-kr-reveal],
.kr-phil.kr-reveal-ready [data-kr-stagger-item],
.kr-phil.kr-reveal-ready [data-kr-img-reveal],
.kr-phil.kr-reveal-ready .kr-phil-quote{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .75s var(--kr-ease), transform .75s var(--kr-ease);
  will-change: opacity, transform;
}
.kr-phil .kr-is-revealed{
  opacity: 1 !important;
  transform: none !important;
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */
.kr-phil-hero{
  position: relative;
  overflow: hidden;
  padding: clamp(2.6rem, 5.2vw, 5.1rem) 0;
  border-bottom: 1px solid var(--kr-border);
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(208,160,88,.14), transparent 60%),
    radial-gradient(700px 460px at 80% 70%, rgba(24,24,24,.06), transparent 62%);
}
body.kr-theme-dark .kr-phil-hero{
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(208,160,88,.18), transparent 60%),
    radial-gradient(700px 460px at 80% 70%, rgba(0,0,0,.38), transparent 62%);
}

/* FX wash layer (drifts via GSAP) */
.kr-phil-hero__fx{
  position: absolute;
  inset: -35%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 600px at 18% 22%, rgba(208,160,88,.18), transparent 60%),
    radial-gradient(720px 520px at 82% 74%, rgba(24,24,24,.12), transparent 62%),
    linear-gradient(120deg, rgba(208,160,88,.14), rgba(24,24,24,.06));
  background-size: 200% 200%;
  filter: blur(28px) saturate(1.10);
  opacity: .58;
  transform: translate3d(0,0,0);
}

.kr-phil-hero__grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: center;
}
@media (max-width: 900px){
  .kr-phil-hero__grid{ grid-template-columns: 1fr; }
}

body.rtl .kr-phil-hero__content,
html[dir="rtl"] .kr-phil-hero__content,
html[lang^="ar"] .kr-phil-hero__content{ text-align: right; }

.kr-phil-hero__title{
  margin: 0 0 .85rem;
  line-height: 1.05;
  font-weight: 900;
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  letter-spacing: -0.01em;
}
.kr-phil-hero__title::after{
  content: "";
  display: block;
  margin-top: .7rem;
  width: 80px;
  height: 3px;
  border-radius: 999px;
  background: rgba(208,160,88,.55);
}

.kr-phil-hero__lead{ color: var(--kr-lead); max-width: 72ch; }
.kr-phil-hero__lead p{ margin: 0 0 .75rem; }
.kr-phil-hero__lead p:last-child{ margin-bottom: 0; }

.kr-phil-hero__subline{
  margin-top: .95rem;
  color: var(--kr-muted);
  max-width: 62ch;
}

/* ---------------------------------------------------------
   NAV CHIPS
--------------------------------------------------------- */
.kr-phil-nav{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.15rem;
}
.kr-phil-chip{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(208,160,88,.22);
  background: rgba(208,160,88,.07);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  font-weight: 850;
  transition: transform .2s var(--kr-ease), box-shadow .2s var(--kr-ease), border-color .2s var(--kr-ease), background-color .2s var(--kr-ease);
}
.kr-phil-chip i{ color: var(--kr-accent); opacity: .95; }
@media (hover:hover){
  .kr-phil-chip:hover{
    transform: translateY(-2px);
    box-shadow: 0 20px 58px rgba(0,0,0,.12);
    border-color: rgba(208,160,88,.38);
    background: rgba(208,160,88,.11);
  }
}

/* ---------------------------------------------------------
   MEDIA FRAMES (premium border + sheen)
--------------------------------------------------------- */
.kr-phil-frame{
  border-radius: 28px;
  padding: 10px;
  overflow: hidden;
  background: linear-gradient(145deg,
    rgba(208,160,88,.90),
    rgba(208,160,88,.30) 35%,
    rgba(24,24,24,.12) 70%,
    rgba(208,160,88,.72)
  );
  box-shadow: 0 22px 60px rgba(0,0,0,.16), 0 0 0 1px rgba(208,160,88,.22) inset;
  transform: translateZ(0);
  position: relative;
}
body.kr-theme-dark .kr-phil-frame{
  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(208,160,88,.20) inset;
}
.kr-phil-frame::after{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  background: radial-gradient(closest-side, rgba(255,255,255,.16), transparent 60%);
  opacity:.0;
  transform: translate3d(-8%, 6%, 0);
  transition: opacity .25s var(--kr-ease);
}
@media (hover:hover){
  .kr-phil-frame:hover::after{ opacity:.45; }
}

.kr-phil-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.22));
}

.kr-phil-placeholder{
  aspect-ratio: 4/5;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(208,160,88,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.04), transparent);
}

/* ---------------------------------------------------------
   TONE SYSTEM (animated by JS variables)
--------------------------------------------------------- */
.kr-phil-section,
.kr-phil-cta{
  position: relative;
  overflow: hidden;
  --kr-tone-a: rgba(24,24,24,.04);
  --kr-tone-b: rgba(208,160,88,.08);
  --kr-tone-op: .84;
  --kr-tone-x: 0%;
  --kr-tone-y: 0%;
}
.kr-phil-section::before,
.kr-phil-cta::before{
  content:"";
  position:absolute;
  inset:-30%;
  pointer-events:none;
  z-index:0;
  opacity: var(--kr-tone-op);
  filter: blur(26px) saturate(1.06);
  background:
    radial-gradient(900px 520px at 18% 22%, var(--kr-tone-a), transparent 60%),
    radial-gradient(700px 460px at 82% 74%, var(--kr-tone-b), transparent 62%);
  background-size: 200% 200%;
  background-position:
    calc(50% + var(--kr-tone-x)) calc(50% + var(--kr-tone-y)),
    calc(50% - var(--kr-tone-x)) calc(50% - var(--kr-tone-y));
}
.kr-phil-section > *,
.kr-phil-cta > *{ position: relative; z-index: 1; }

.kr-phil-section.is-inview,
.kr-phil-cta.is-inview{ --kr-tone-op: .96; }

.kr-tone-gold{ --kr-tone-a: rgba(208,160,88,.16); --kr-tone-b: rgba(24,24,24,.05); }
.kr-tone-ink{ --kr-tone-a: rgba(24,24,24,.06); --kr-tone-b: rgba(208,160,88,.14); --kr-tone-op: .78; }
.kr-tone-neutral{ --kr-tone-a: rgba(24,24,24,.04); --kr-tone-b: rgba(24,24,24,.03); }

/* ---------------------------------------------------------
   SECTIONS
--------------------------------------------------------- */
.kr-phil-section{
  padding: clamp(2.8rem, 4.8vw, 5.2rem) 0;
  border-top: 1px solid rgba(24,24,24,.06);
}
.kr-phil-section--alt{
  background: var(--kr-surface-2);
  border-top: 1px solid var(--kr-border);
  border-bottom: 1px solid var(--kr-border);
}

/* EDITORIAL ROW: media LEFT, text RIGHT */
.kr-phil-row{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(1.25rem, 3.2vw, 2.6rem);
  align-items: start;
}
@media (max-width: 900px){
  .kr-phil-row{ grid-template-columns: 1fr; }
}

/* Sticky media = modern premium */
@media (min-width: 901px){
  .kr-phil-row__media{
    position: sticky;
    top: 96px;
  }
}

.kr-phil-media-stack{
  display: grid;
  gap: 1rem;
}

.kr-phil-h2{
  margin: 0 0 .85rem;
  font-size: clamp(1.55rem, 2.3vw, 1.9rem);
  font-weight: 900;
  letter-spacing: -0.01em;
}
.kr-phil-h2::after{
  content:"";
  display:block;
  margin-top:.55rem;
  width: 62px;
  height: 2px;
  border-radius: 999px;
  background: rgba(208,160,88,.50);
}

.kr-phil-prose{ color: var(--kr-lead); max-width: 80ch; }
.kr-phil-prose p{ margin: 0 0 .9rem; }
.kr-phil-prose p:last-child{ margin-bottom: 0; }

/* ---------------------------------------------------------
   “BULLETS” → PREMIUM CARDS (less boring)
--------------------------------------------------------- */
.kr-phil-cards{
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}

.kr-phil-card{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(24,24,24,.10);
  background: rgba(255,255,255,.82);
  box-shadow: 0 16px 46px rgba(0,0,0,.08);
  padding: 1.05rem 1.05rem 1.05rem 3.0rem;
  line-height: 1.45;
  overflow: hidden;
  transition: transform .18s var(--kr-ease), box-shadow .18s var(--kr-ease), border-color .18s var(--kr-ease), background-color .18s var(--kr-ease);
}
body.kr-theme-dark .kr-phil-card{ background: rgba(24,24,24,.35); border-color: rgba(255,255,255,.10); }

.kr-phil-card::before{
  content:"";
  position:absolute;
  left: 1.05rem;
  top: 1.18rem;
  width: 1.0rem;
  height: 1.0rem;
  border-radius: 999px;
  border: 1px solid rgba(208,160,88,.55);
  background: rgba(208,160,88,.18);
  box-shadow: 0 10px 24px rgba(208,160,88,.12);
}
.kr-phil-card::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background: linear-gradient(120deg, transparent 0 45%, rgba(208,160,88,.12) 55%, transparent 70%);
  opacity: .0;
  transform: translateX(-18%);
  transition: opacity .2s var(--kr-ease), transform .35s var(--kr-ease);
}

@media (hover:hover){
  .kr-phil-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 22px 70px rgba(0,0,0,.14);
    border-color: rgba(208,160,88,.28);
    background: rgba(208,160,88,.06);
  }
  .kr-phil-card:hover::after{
    opacity: .85;
    transform: translateX(8%);
  }
}

/* small “staggered layout” feel */
@media (min-width: 901px){
  .kr-phil-card:nth-child(2){ transform: translateX(10px); }
  body.rtl .kr-phil-card:nth-child(2){ transform: translateX(-10px); }
  .kr-phil-card:nth-child(3){ transform: translateX(4px); }
  body.rtl .kr-phil-card:nth-child(3){ transform: translateX(-4px); }
}

/* RTL padding */
body.rtl .kr-phil-card{
  padding: 1.05rem 3.0rem 1.05rem 1.05rem;
}
body.rtl .kr-phil-card::before{
  left:auto;
  right: 1.05rem;
}

/* ---------------------------------------------------------
   QUOTE (already premium, just keep)
--------------------------------------------------------- */
.kr-phil-quote{
  margin: 0;
  border-radius: 22px;
  border: 1px solid rgba(208,160,88,.25);
  background:
    linear-gradient(135deg, rgba(208,160,88,.10), transparent 60%),
    radial-gradient(700px 360px at 20% 20%, rgba(208,160,88,.10), transparent 60%);
  padding: 1.15rem 1.1rem 1rem;
  box-shadow: 0 18px 44px rgba(0,0,0,.08);
}
body.kr-theme-dark .kr-phil-quote{ box-shadow: 0 28px 90px rgba(0,0,0,.55); }
.kr-phil-quote__body{
  margin: 0;
  color: var(--kr-lead);
  font-weight: 780;
  line-height: 1.5;
}
.kr-phil-quote__body p{ margin: 0; }

/* ---------------------------------------------------------
   CTA — upgraded to “mini hero panel”
--------------------------------------------------------- */
.kr-phil-cta{
  border-top: 1px solid var(--kr-border);
  padding: clamp(2.8rem, 4.8vw, 5.2rem) 0;
}

.kr-phil-cta__card{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(208,160,88,.24);
  background: linear-gradient(135deg, rgba(208,160,88,.10), rgba(255,255,255,.85) 55%);
  box-shadow: 0 26px 90px rgba(0,0,0,.14);
}
body.kr-theme-dark .kr-phil-cta__card{
  background: linear-gradient(135deg, rgba(208,160,88,.12), rgba(24,24,24,.55) 55%);
  box-shadow: 0 34px 120px rgba(0,0,0,.60);
}

.kr-phil-cta__fx{
  position: absolute;
  inset: -35%;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(208,160,88,.22), transparent 60%),
    radial-gradient(700px 460px at 80% 70%, rgba(24,24,24,.10), transparent 62%),
    linear-gradient(120deg, rgba(208,160,88,.12), rgba(24,24,24,.06));
  background-size: 200% 200%;
  filter: blur(30px) saturate(1.10);
  opacity: .65;
  animation: kr-hero-film 18s var(--kr-ease) infinite;
}

.kr-phil-cta__inner{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.2rem;
  padding: clamp(1.25rem, 2.2vw, 1.9rem);
  grid-template-columns: 1fr auto;
  align-items: center;
}
@media (max-width: 900px){
  .kr-phil-cta__inner{ grid-template-columns: 1fr; }
}

.kr-phil-cta__title{
  margin: 0 0 .6rem;
  font-weight: 900;
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  letter-spacing: -0.01em;
}

.kr-phil-cta__actions{
  display: grid;
  gap: .55rem;
  justify-items: start;
}
.kr-phil-cta__hint{
  margin: 0;
  font-size: .92rem;
  color: var(--kr-muted);
  opacity: .92;
}

/* stronger button feel inside CTA */
.kr-phil-cta .kr-btn{
  box-shadow: 0 18px 52px rgba(0,0,0,.18);
}
@media (hover:hover){
  .kr-phil-cta .kr-btn:hover{ transform: translateY(-1px); }
}

/* Focus */
.kr-phil a{ color: inherit; }
.kr-phil a:focus-visible{
  outline: 3px solid var(--kr-outline, rgba(208,160,88,.35));
  outline-offset: 3px;
  border-radius: 10px;
}

/* ---------------------------------------------------------
   FP scheme: same header/footer colors (Front Page Colors)
   --------------------------------------------------------- */
body.kr-fp-scheme-light .kr-phil,
body.kr-fp-scheme-dark .kr-phil {
  background: var(--kr-fp-bg);
  color: var(--kr-fp-text);
}
body.kr-fp-scheme-light .kr-phil-hero,
body.kr-fp-scheme-dark .kr-phil-hero {
  border-bottom-color: var(--kr-fp-border);
  background: transparent;
}
body.kr-fp-scheme-light .kr-phil-hero__fx,
body.kr-fp-scheme-dark .kr-phil-hero__fx {
  background:
    radial-gradient(900px 600px at 18% 22%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(720px 520px at 82% 74%, rgba(0,0,0,.08), transparent 62%);
  opacity: .5;
}
body.kr-fp-scheme-light .kr-phil-hero__title,
body.kr-fp-scheme-dark .kr-phil-hero__title {
  color: var(--kr-fp-intro-heading);
}
body.kr-fp-scheme-light .kr-phil-hero__title::after,
body.kr-fp-scheme-dark .kr-phil-hero__title::after {
  background: rgba(255,255,255,.35);
}
body.kr-fp-scheme-light .kr-phil-hero__lead,
body.kr-fp-scheme-light .kr-phil-hero__subline,
body.kr-fp-scheme-dark .kr-phil-hero__lead,
body.kr-fp-scheme-dark .kr-phil-hero__subline {
  color: var(--kr-fp-intro-text);
}
body.kr-fp-scheme-light .kr-phil-chip,
body.kr-fp-scheme-dark .kr-phil-chip {
  border-color: var(--kr-fp-border);
  background: var(--kr-fp-hover);
  color: var(--kr-fp-text);
  box-shadow: none;
}
body.kr-fp-scheme-light .kr-phil-chip i,
body.kr-fp-scheme-dark .kr-phil-chip i {
  color: var(--kr-fp-text);
}
@media (hover: hover) {
  body.kr-fp-scheme-light .kr-phil-chip:hover,
  body.kr-fp-scheme-dark .kr-phil-chip:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.2);
  }
}
body.kr-fp-scheme-light .kr-phil-frame,
body.kr-fp-scheme-dark .kr-phil-frame {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
body.kr-fp-scheme-light .kr-phil-section,
body.kr-fp-scheme-dark .kr-phil-section {
  border-top-color: var(--kr-fp-border);
}
body.kr-fp-scheme-light .kr-phil-section--alt,
body.kr-fp-scheme-dark .kr-phil-section--alt {
  background: rgba(255,255,255,.05);
  border-color: var(--kr-fp-border);
}
body.kr-fp-scheme-light .kr-phil-h2,
body.kr-fp-scheme-dark .kr-phil-h2 {
  color: var(--kr-fp-intro-heading);
}
body.kr-fp-scheme-light .kr-phil-h2::after,
body.kr-fp-scheme-dark .kr-phil-h2::after {
  background: rgba(255,255,255,.35);
}
body.kr-fp-scheme-light .kr-phil-prose,
body.kr-fp-scheme-dark .kr-phil-prose {
  color: var(--kr-fp-intro-text);
}
body.kr-fp-scheme-light .kr-phil-card,
body.kr-fp-scheme-dark .kr-phil-card {
  border-color: var(--kr-fp-border);
  background: rgba(255,255,255,.06);
}
body.kr-fp-scheme-dark .kr-phil-card {
  background: rgba(255,255,255,.05);
}
body.kr-fp-scheme-light .kr-phil-card::before,
body.kr-fp-scheme-dark .kr-phil-card::before {
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.12);
  box-shadow: none;
}
@media (hover: hover) {
  body.kr-fp-scheme-light .kr-phil-card:hover,
  body.kr-fp-scheme-dark .kr-phil-card:hover {
    border-color: rgba(255,255,255,.2);
    background: rgba(255,255,255,.1);
  }
}
body.kr-fp-scheme-light .kr-phil-quote,
body.kr-fp-scheme-dark .kr-phil-quote {
  border-color: var(--kr-fp-border);
  background: rgba(255,255,255,.08);
  box-shadow: none;
}
body.kr-fp-scheme-dark .kr-phil-quote {
  background: rgba(255,255,255,.05);
}
body.kr-fp-scheme-light .kr-phil-quote__body,
body.kr-fp-scheme-dark .kr-phil-quote__body {
  color: var(--kr-fp-intro-text);
}
body.kr-fp-scheme-light .kr-phil-cta,
body.kr-fp-scheme-dark .kr-phil-cta {
  border-top-color: var(--kr-fp-border);
}
body.kr-fp-scheme-light .kr-phil-cta__card,
body.kr-fp-scheme-dark .kr-phil-cta__card {
  border-color: var(--kr-fp-border);
  background: rgba(255,255,255,.08);
}
body.kr-fp-scheme-dark .kr-phil-cta__card {
  background: rgba(255,255,255,.06);
}
body.kr-fp-scheme-light .kr-phil-cta__title,
body.kr-fp-scheme-dark .kr-phil-cta__title {
  color: var(--kr-fp-intro-heading);
}
body.kr-fp-scheme-light .kr-phil-cta__hint,
body.kr-fp-scheme-dark .kr-phil-cta__hint {
  color: var(--kr-fp-intro-text);
  opacity: .9;
}
body.kr-fp-scheme-light .kr-phil a:focus-visible,
body.kr-fp-scheme-dark .kr-phil a:focus-visible {
  outline-color: var(--kr-fp-outline);
}