/* ==========================================================================
   DHARMIKAM — THE KALARI (inner page)
   Page-specific blocks only. The banner, breadcrumb and header-over-banner
   treatment come from inner-page.css; tokens, buttons and section shells come
   from base.css / sections.css. Every selector below is a `.klr-*` block that
   exists nowhere else, so this file cannot reach any page that does not load it.

   Load order: base.css → sections.css → animations.css → responsive.css
               → inner-page.css → the-kalari.css (last, so it can refine)
   ========================================================================== */

/* ==========================================================================
   1. BANNER REFINEMENTS
   The Kalari banner runs a little taller than the packages one — the subject
   is a full standing figure rather than a treatment close-up.
   ========================================================================== */
.page-hero--kalari{min-height:clamp(360px,46vw,560px)}
.page-hero--kalari .page-hero__bg img{object-position:center 34%}

/* ==========================================================================
   2. EDITORIAL LEDE
   ========================================================================== */
.klr-lede__intro{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.1vw,1.75rem);
  line-height:1.5;letter-spacing:-.012em;
  color:var(--ink);
  max-width:34ch;
}
/*.klr-lede__body{max-width:64ch}*/
.klr-lede__body p:first-of-type::first-letter{
  float:left;
  font-family:var(--font-display);
  font-size:3.9em;line-height:.82;
  font-weight:600;color:var(--herb);
  margin:.06em .12em 0 0;
}

/* Fact strip — same visual language as the home page's hero stats */
.klr-stats{
  display:flex;flex-wrap:wrap;gap:clamp(1.4rem,3vw,3rem);
  margin-top:clamp(2.4rem,4vw,3.2rem);
  padding-top:1.8rem;border-top:1px solid var(--line);
}
.klr-stats > div{min-width:120px}

/* ==========================================================================
   3. FRAMED IMAGERY
   ========================================================================== */
.klr-frame{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  background-image:linear-gradient(150deg,var(--mist),var(--sand));
}
.klr-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.4s var(--ease-out);
}
.klr-frame:hover img{transform:scale(1.055)}
.klr-frame--portrait{aspect-ratio:4/4.8}
.klr-frame--landscape{aspect-ratio:4/3}
.klr-frame__ring{inset:-7% -5% -5% -5%;z-index:1}

/* Small gold plaque that sits over a framed image */
.klr-plaque{
  position:absolute;z-index:4;left:-3%;bottom:8%;
  display:flex;align-items:center;gap:.85rem;
  padding:.95rem 1.35rem;border-radius:var(--r-md);
  background:var(--deep);color:var(--cream);box-shadow:var(--sh-md);
  animation:floatY 8s ease-in-out .5s infinite;
}
.klr-plaque .num{
  font-family:var(--font-display);font-size:1.5rem;font-weight:600;
  color:var(--gold-soft);line-height:1;
}
.klr-plaque .lab{
  font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;
  opacity:.84;line-height:1.45;
}

@media (max-width:991.98px){
  .klr-media-col{margin-bottom:3rem}
  .klr-frame--portrait{aspect-ratio:4/3.6;width:min(100%,540px);margin-inline:auto}
  .klr-plaque{left:0}
}
@media (max-width:479.98px){
  .klr-plaque{position:static;margin-top:1.1rem;animation:none;width:max-content}
}

/* ==========================================================================
   4. ETYMOLOGY / DEFINITION CALLOUT
   ========================================================================== */
.klr-define{
  position:relative;
  margin:2rem 0;padding:1.5rem 1.6rem 1.5rem 2.1rem;
  border-radius:var(--r-sm);
  background:linear-gradient(120deg,rgba(220,233,225,.75),rgba(242,233,216,.6));
  border:1px solid var(--line);
}
.klr-define::before{
  content:"";position:absolute;left:0;top:12%;bottom:12%;width:3px;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--gold),var(--herb));
}
.klr-define dt{
  font-family:var(--font-display);
  font-size:1.22rem;font-weight:600;color:var(--ink);
  margin-bottom:.3rem;
}
.klr-define dd{margin:0;font-size:.95rem;color:var(--body)}
.klr-define .klr-define__root{
  display:block;
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--herb);margin-bottom:.55rem;
}

/* ==========================================================================
   5. ORIGINS TIMELINE
   ========================================================================== */
.klr-timeline{
  position:relative;
  max-width:860px;margin-inline:auto;
  padding-left:clamp(2.4rem,4vw,3.4rem);
  list-style:none;
}
/* the rail */
.klr-timeline::before{
  content:"";position:absolute;
  left:clamp(.62rem,1.05vw,.92rem);top:.6rem;bottom:.6rem;width:2px;
  background:linear-gradient(180deg,
    rgba(192,153,63,0),
    rgba(192,153,63,.55) 12%,
    rgba(45,106,79,.45) 88%,
    rgba(45,106,79,0));
}
.klr-timeline > li{position:relative;padding-bottom:clamp(2.2rem,3.6vw,3.1rem)}
.klr-timeline > li:last-child{padding-bottom:0}
/* the node */
.klr-timeline > li::before{
  content:"";position:absolute;
  left:calc(clamp(2.4rem,4vw,3.4rem) * -1 + clamp(.22rem,.42vw,.4rem));
  top:.45rem;width:15px;height:15px;border-radius:50%;
  background:var(--cream);
  border:2.5px solid var(--herb);
  box-shadow:0 0 0 5px rgba(45,106,79,.1);
  transition:background-color .4s var(--ease),border-color .4s var(--ease),
             box-shadow .4s var(--ease);
}
.klr-timeline > li:hover::before{
  background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 0 6px rgba(192,153,63,.18);
}
.klr-era{
  display:inline-block;margin-bottom:.55rem;
  padding:.32rem .85rem;border-radius:var(--r-pill);
  background:var(--mist);border:1px solid rgba(45,106,79,.16);
  color:var(--herb);
  font-size:.65rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.klr-timeline h3{
  font-size:clamp(1.2rem,1.7vw,1.5rem);
  margin-bottom:.55rem;
}
.klr-timeline p{font-size:.96rem;margin-bottom:0}
.klr-timeline p + p{margin-top:.8rem}

/* ==========================================================================
   6. PULL QUOTE
   ========================================================================== */
.klr-pull{
  position:relative;
  max-width:800px;margin:clamp(2.4rem,4vw,3.4rem) auto 0;
  padding:clamp(1.8rem,3vw,2.6rem) clamp(1.6rem,3vw,2.8rem);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(226,200,138,.22);
  text-align:center;
}
.klr-pull__mark{
  font-family:var(--font-display);
  font-size:3.4rem;line-height:.6;color:var(--gold);
  display:block;margin-bottom:.5rem;
}
.klr-pull p{
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.08rem,1.8vw,1.4rem);
  line-height:1.6;color:var(--cream);margin-bottom:0;
}
.klr-pull cite{
  display:block;margin-top:1.1rem;font-style:normal;
  font-size:.7rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold-soft);
}

/* ==========================================================================
   7. GALLERY GRID
   Uniform tiles on a consistent 4:3 crop — 3 columns on desktop and tablet,
   2 on phones. The grid is content-agnostic: adding or removing a <figure>
   needs no CSS change, so more photographs can be dropped in at any time.
   ========================================================================== */
.klr-grid{
  display:grid;
  gap:clamp(.65rem,1.15vw,1.05rem);
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:767.98px){
  .klr-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}
}

.klr-tile{
  position:relative;overflow:hidden;
  margin:0;                       /* <figure> carries a default margin */
  aspect-ratio:4/3;
  border-radius:var(--r-sm);
  box-shadow:var(--sh-sm);
  background-image:linear-gradient(150deg,var(--mist),var(--sand));
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
.klr-tile img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease-out);
}
/* Light base tint that deepens on hover — the tiles carry no caption, so this
   only has to settle the photographs into the band, not carry text. */
.klr-tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,46,30,.06),rgba(15,46,30,.26));
  opacity:.55;transition:opacity .5s var(--ease);
}
.klr-tile:hover,.klr-tile:focus-within{
  transform:translateY(-5px);
  box-shadow:var(--sh-md);
}
.klr-tile:hover img,.klr-tile:focus-within img{transform:scale(1.07)}
.klr-tile:hover::after,.klr-tile:focus-within::after{opacity:1}

/* thin gold hairline that draws in on hover */
.klr-tile__edge{
  position:absolute;z-index:3;inset:0;pointer-events:none;
  border:1px solid rgba(226,200,138,0);
  border-radius:inherit;
  transition:border-color .5s var(--ease);
}
.klr-tile:hover .klr-tile__edge,
.klr-tile:focus-within .klr-tile__edge{border-color:rgba(226,200,138,.55)}

.klr-tile figcaption{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:.85rem 1rem;
  color:#fff;font-size:.78rem;font-weight:500;letter-spacing:.04em;line-height:1.4;
  transform:translateY(6px);opacity:0;
  transition:transform .5s var(--ease-out),opacity .5s var(--ease);
}
.klr-tile:hover figcaption,.klr-tile:focus-within figcaption{transform:none;opacity:1}

/* Touch devices never hover — keep the captions legible there. */
@media (hover:none){
  .klr-tile figcaption{transform:none;opacity:1}
}
@media (max-width:575.98px){
  .klr-tile figcaption{font-size:.7rem;padding:.6rem .7rem}
}

/* A gallery sitting on the deep-green band needs a touch more separation. */
.section--dark .klr-tile{box-shadow:0 18px 40px -24px rgba(0,0,0,.75)}
.section--dark .klr-tile{background-image:linear-gradient(150deg,#1B4332,#123722)}

/* Caption line under a gallery */
.klr-gallery-note{
  margin-top:clamp(1.2rem,2vw,1.7rem);
  text-align:center;font-size:.84rem;color:var(--muted);
}
.section--dark .klr-gallery-note{color:rgba(236,244,239,.6)}

/* ==========================================================================
   8. TRAINING LEVELS
   ========================================================================== */
.klr-level{
  position:relative;height:100%;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(1.8rem,2.4vw,2.2rem) clamp(1.5rem,2.2vw,1.9rem);
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-xs);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),
             border-color .4s var(--ease);
}
.klr-level::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--herb));
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.klr-level:hover,.klr-level:focus-within{
  transform:translateY(-9px);box-shadow:var(--sh-md);
  border-color:rgba(45,106,79,.22);
}
.klr-level:hover::after,.klr-level:focus-within::after{transform:scaleX(1)}

.klr-level__num{
  position:absolute;top:.5rem;right:1.15rem;z-index:-1;
  font-family:var(--font-display);font-size:4.4rem;font-weight:600;
  line-height:1;color:rgba(45,106,79,.08);pointer-events:none;
  transition:color .5s var(--ease);
}
.klr-level:hover .klr-level__num{color:rgba(192,153,63,.2)}
.klr-level__icon{
  width:54px;height:54px;flex:none;display:grid;place-items:center;
  margin-bottom:1.2rem;border-radius:16px 6px 16px 6px;
  background:var(--mist);color:var(--herb);
  transition:transform .55s var(--ease-out),background-color .45s var(--ease),
             color .45s var(--ease),border-radius .55s var(--ease-out);
}
.klr-level__icon svg{width:26px;height:26px}
.klr-level:hover .klr-level__icon{
  transform:rotate(-8deg);border-radius:6px 16px 6px 16px;
  background:var(--deep);color:var(--gold-soft);
}
.klr-level h3{font-size:clamp(1.1rem,1.35vw,1.3rem);margin-bottom:.6rem}
.klr-level p{font-size:.93rem;margin-bottom:0}

/* ==========================================================================
   9. SYLLABUS TABLE
   ========================================================================== */
.klr-table-wrap{
  overflow-x:auto;
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  border:1px solid var(--line);
  background:#fff;
  -webkit-overflow-scrolling:touch;
}
.klr-table{
  width:100%;min-width:640px;
  border-collapse:collapse;
  font-size:.93rem;
}
.klr-table th,.klr-table td{
  padding:1.15rem 1.4rem;
  text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);
}
/* The header row carries the banded bar, as in the reference table. */
.klr-table thead th{
  background:linear-gradient(100deg,var(--deep),var(--forest));
  color:var(--cream);
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:0;
}
.klr-table tbody tr:last-child th,
.klr-table tbody tr:last-child td{border-bottom:0}
.klr-table tbody tr:nth-child(even){background:rgba(220,233,225,.28)}
.klr-table tbody th{
  font-family:var(--font-display);
  font-size:1.05rem;font-weight:600;color:var(--ink);
  white-space:nowrap;
}
.klr-table__dur{
  font-weight:600;color:var(--herb);white-space:nowrap;
}
.klr-table ul{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.42rem;
}
.klr-table ul li{display:flex;align-items:flex-start;gap:.6rem;line-height:1.45}
.klr-table ul li::before{
  content:"";flex:none;margin-top:.55rem;
  width:5px;height:5px;border-radius:50%;background:var(--gold);
}
.klr-scroll-hint{
  display:none;margin-top:.7rem;
  font-size:.76rem;color:var(--muted);text-align:center;
}
@media (max-width:767.98px){
  .klr-scroll-hint{display:block}
}

/* ==========================================================================
   10. BENEFITS
   ========================================================================== */
.klr-benefit{
  position:relative;height:100%;
  display:flex;align-items:flex-start;gap:1rem;
  padding:1.35rem 1.4rem;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);
  box-shadow:var(--sh-xs);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),
             border-color .4s var(--ease);
}
.klr-benefit:hover{
  transform:translateY(-6px);box-shadow:var(--sh-sm);
  border-color:rgba(45,106,79,.22);
}
.klr-benefit__num{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--mist);color:var(--herb);
  font-family:var(--font-display);font-size:.98rem;font-weight:600;
  transition:background-color .4s var(--ease),color .4s var(--ease);
}
.klr-benefit:hover .klr-benefit__num{background:var(--deep);color:var(--gold-soft)}
.klr-benefit p{font-size:.93rem;line-height:1.55;margin:0;color:var(--ink)}

/* ==========================================================================
   11. CODE OF CONDUCT (dark band)
   ========================================================================== */
.klr-code{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.85rem;
  max-width:900px;margin-inline:auto;
}
.klr-code li{
  display:flex;align-items:flex-start;gap:1rem;
  padding:1.05rem 1.35rem;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(226,200,138,.18);
  color:rgba(236,244,239,.82);
  font-size:.95rem;line-height:1.6;
  transition:background-color .45s var(--ease),border-color .45s var(--ease),
             transform .45s var(--ease-out);
}
.klr-code li:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(226,200,138,.4);
  transform:translateX(4px);
}
.klr-code i{
  flex:none;margin-top:.22rem;
  color:var(--gold-soft);font-size:1rem;
}

/* ==========================================================================
   12. SCHOOL / REGISTRATION FEATURE
   ========================================================================== */
.klr-note{
  display:inline-flex;align-items:flex-start;gap:.8rem;
  margin-top:.4rem;padding:.85rem 1.35rem;
  border-radius:var(--r-md);
  background:var(--mist);border:1px solid rgba(45,106,79,.18);
  color:var(--deep);
  font-size:.88rem;font-weight:500;line-height:1.5;
}
.klr-note i{color:var(--herb);font-size:1rem;margin-top:.12rem;flex:none}

/* ==========================================================================
   13. INLINE LINK ON THE DARK CTA
   The reference sets "Contact us" as a link; the default herb green is too
   dark against the deep-green panel, so lift it to the gold ink.
   ========================================================================== */
.cta__inner .lead-text a{
  color:var(--gold-soft);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:rgba(226,200,138,.45);
  transition:color .3s var(--ease),text-decoration-color .3s var(--ease);
}
.cta__inner .lead-text a:hover{color:#fff;text-decoration-color:#fff}

/* ==========================================================================
   14. DECORATIVE BLOBS
   ========================================================================== */
.blob--klr-a{
  width:min(54vw,600px);aspect-ratio:1;top:-12%;right:-15%;
  background:radial-gradient(circle,rgba(169,201,182,.5),transparent 68%);
  animation:driftB 27s ease-in-out infinite;
}
.blob--klr-b{
  width:min(48vw,520px);aspect-ratio:1;bottom:-16%;left:-13%;
  background:radial-gradient(circle,rgba(226,200,138,.42),transparent 68%);
  animation:driftA 31s ease-in-out infinite;
}
.blob--klr-c{
  width:min(44vw,480px);aspect-ratio:1;top:8%;left:-12%;
  background:radial-gradient(circle,rgba(169,201,182,.44),transparent 68%);
  animation:driftA 29s ease-in-out infinite;
}

@media print{
  .klr-grid{grid-template-columns:repeat(2,1fr)}
  .klr-tile,.klr-level,.klr-benefit,.klr-table-wrap{break-inside:avoid;box-shadow:none}
  .klr-table{min-width:0}
}

.col-lg-12.col-xl-8.mx-auto {
    width: 100%;
}