/* =====================================================================
   tanjore.css — Tanjore painting vocabulary (NO deities)
   Translates: gold leaf, ornamental arches (toran), paisley borders,
   jewel inlay accents, illuminated frames. Loaded AFTER pavsarts.css,
   BEFORE components.css. The dominant aesthetic layer for Chilli Club.

   Subjects depicted: chillies, lotus, paisley, stove, truck, thali — never
   divine figures. The visual style is Tanjore; the iconography is food.
   ===================================================================== */

/* ---------- Tanjore palette extensions ---------- */
:root {
  --tj-sindoor:    #C8102E;  /* vermilion red — dominant temple field */
  --tj-rakta:      #8C1B23;  /* deep blood-red — shadow tones */
  --tj-kanaka:     #E2B73C;  /* imperial gold leaf */
  --tj-kanaka-dk:  #8B6E1B;  /* gold leaf shadow */
  --tj-neel:       #1B3B5F;  /* deep indigo */
  --tj-panna:      #0F5132;  /* emerald */
  --tj-marakatha:  #2D7A4F;  /* jade green */
  --tj-chandan:    #F4E4C1;  /* sandalwood cream — accent text */
  --tj-ivory:      #FFF3D9;
  --tj-vyaktitva:  #5B0A14;  /* maroon — borders */

  /* Gold-leaf gradient — used everywhere gold appears */
  --gold-leaf: linear-gradient(
    155deg,
    #FFF3CC 0%,
    #E2B73C 18%,
    #B8861E 42%,
    #E2B73C 62%,
    #8B6E1B 80%,
    #C99A2A 100%
  );

  /* Vermilion field gradient — temple background depth */
  --vermilion-field: radial-gradient(
    ellipse at 50% 35%,
    #8C1B23 0%,
    #5B0A14 55%,
    #2A0508 100%
  );
}

/* ---------- Gold leaf utilities ---------- */
.gold-leaf {
  background: var(--gold-leaf);
  background-size: 200% 200%;
  background-position: 30% 30%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: none;
}

.gold-leaf-fill {
  background: var(--gold-leaf);
  background-size: 200% 200%;
  background-position: 30% 30%;
  color: #2A0508;
}

.gold-rule {
  height: 2px;
  background: var(--gold-leaf);
  background-size: 200% 100%;
  background-position: 30% 50%;
  border: 0;
  margin: 0 auto;
  width: clamp(180px, 30vw, 400px);
}

.gold-rule--thick { height: 4px; box-shadow: 0 1px 0 var(--tj-kanaka-dk); }

/* ---------- Section painterly canvases (override pavsarts where richer) ---------- */
#hero {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(226,183,60,0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, #2A0508 0%, #0D0A06 80%);
}
#story {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(226,183,60,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 60%, #0F2A1B 0%, #0D0A06 80%);
}
#menu {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(226,183,60,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 60%, #0B1A33 0%, #0D0A06 80%);
}
#howitworks {
  background:
    radial-gradient(ellipse at 50% 50%, #0F2A24 0%, #0D0A06 80%);
}
#order {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(226,183,60,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, #2A1605 0%, #0D0A06 80%);
}

/* ---------- Ornamental section header arch ---------- */
.toran {
  display: block;
  margin: 0 auto 0.6rem;
  width: clamp(180px, 30vw, 380px);
  height: 38px;
  overflow: visible;
}
.toran path,
.toran line { fill: none; stroke: var(--tj-kanaka); stroke-width: 1.6; stroke-linecap: round; }
.toran circle,
.toran ellipse,
.toran rect { fill: var(--tj-kanaka); stroke: var(--tj-kanaka-dk); stroke-width: 0.8; }
.toran .gem--red   { fill: var(--tj-sindoor); }
.toran .gem--green { fill: var(--tj-marakatha); }
.toran .gem--blue  { fill: var(--tj-neel); }
.toran .gem--pearl { fill: var(--tj-chandan); }

/* ---------- Decorator pip (replaces ◆ → tiny lotus motif) ---------- */
.decorator {
  display: inline-flex;
  gap: 0.7em;
  align-items: center;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  color: var(--tj-kanaka);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
}
.decorator::before, .decorator::after {
  content: '';
  width: 36px; height: 8px;
  background:
    radial-gradient(circle at 50% 50%, var(--tj-kanaka) 0 2px, transparent 2.5px),
    linear-gradient(90deg, transparent 0%, var(--tj-kanaka) 30%, var(--tj-kanaka) 70%, transparent 100%);
  background-size: 8px 8px, 100% 1.5px;
  background-position: center, center;
  background-repeat: repeat-x, no-repeat;
  opacity: 0.85;
}

/* ---------- Royal stamp — gold-leaf version ---------- */
.royal-stamp {
  display: inline-block;
  padding: 0.5em 1.2em;
  background: linear-gradient(180deg, rgba(226,183,60,0.10), rgba(0,0,0,0));
  border: 2px solid transparent;
  border-image: var(--gold-leaf) 1;
  border-radius: 0; /* Tanjore is rectilinear */
  font-family: 'Alfa Slab One', cursive;
  font-size: 0.72rem;
  color: var(--tj-kanaka);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: relative;
}
.royal-stamp::before,
.royal-stamp::after {
  content: '';
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px;
  background: var(--tj-sindoor);
  border: 1.5px solid var(--tj-kanaka);
  border-radius: 50%;
}
.royal-stamp::before { left: -10px; }
.royal-stamp::after  { right: -10px; }

/* ---------- Painterly card (Tanjore-style override) ---------- */
.card-painterly {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(226,183,60,0.08) 0%, transparent 60%),
    linear-gradient(155deg, rgba(255,107,0,0.04) 0%, rgba(0,0,0,0) 60%),
    var(--cc-surface);
  border: 1px solid transparent;
  border-image: linear-gradient(155deg, var(--tj-kanaka) 0%, var(--tj-kanaka-dk) 50%, var(--tj-kanaka) 100%) 1;
  border-radius: 4px;
  box-shadow:
    inset 0 0 40px rgba(226,183,60,0.05),
    inset 0 1px 0 rgba(255,243,217,0.08);
  position: relative;
  overflow: hidden;
}

/* Tanjore gem-inlay corners on every painterly card */
.card-painterly::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: var(--gold-leaf);
  background-size: 200% 100%;
  background-position: 30% 50%;
  opacity: 0.7;
  pointer-events: none;
}
.card-painterly > .gem-corner {
  position: absolute;
  width: 8px; height: 8px;
  background: radial-gradient(circle at 35% 35%, var(--tj-chandan) 0%, var(--tj-sindoor) 60%, var(--tj-rakta) 100%);
  border: 1px solid var(--tj-kanaka);
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
}
.card-painterly > .gem-corner--tl { top: 6px;   left: 6px;  }
.card-painterly > .gem-corner--tr { top: 6px;   right: 6px; }
.card-painterly > .gem-corner--bl { bottom: 6px; left: 6px; }
.card-painterly > .gem-corner--br { bottom: 6px; right: 6px;background: radial-gradient(circle at 35% 35%, var(--tj-chandan) 0%, var(--tj-marakatha) 60%, #062417 100%);}

/* ---------- Paisley border SVG container ---------- */
.paisley-divider {
  display: block;
  margin: clamp(2rem, 5vw, 4rem) auto;
  width: clamp(220px, 40vw, 520px);
  height: 36px;
  overflow: visible;
  opacity: 0.85;
}
.paisley-divider path { fill: var(--tj-kanaka); stroke: var(--tj-kanaka-dk); stroke-width: 0.6; }
.paisley-divider .gem-r { fill: var(--tj-sindoor); }
.paisley-divider .gem-g { fill: var(--tj-marakatha); }
.paisley-divider .gem-b { fill: var(--tj-neel); }
.paisley-divider line   { stroke: var(--tj-kanaka); stroke-width: 1; }

/* ---------- Mascot frame — styled to match the event-card painterly look ---------- */
.mascot-frame {
  position: relative;
  padding: 1.1rem 1.1rem 1.3rem;
  /* Plum / aubergine canvas, echoing the events section background */
  background:
    radial-gradient(ellipse at 50% 35%, rgba(226,183,60,0.10) 0%, transparent 65%),
    radial-gradient(ellipse at 50% 60%, rgba(200,16,46,0.08) 0%, transparent 70%),
    linear-gradient(155deg, #2A1538 0%, #1A0E2A 60%, #0D0A06 100%);
  border: 1px solid transparent;
  border-image: linear-gradient(155deg, var(--tj-kanaka) 0%, var(--tj-kanaka-dk) 50%, var(--tj-kanaka) 100%) 1;
  border-radius: 4px;
  box-shadow:
    inset 0 0 40px rgba(226,183,60,0.05),
    inset 0 1px 0 rgba(255,243,217,0.08),
    0 20px 50px rgba(0,0,0,0.5);
  isolation: isolate;
  overflow: hidden;
}
/* Top hairline of gold-leaf (matches .card-painterly::before) */
.mascot-frame::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: var(--gold-leaf);
  background-size: 200% 100%;
  background-position: 30% 50%;
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}
/* No second pseudo-element — we now use real gem-corner spans in markup. */
.mascot-frame::after { content: none; }

/* Gem corners inside the mascot frame (mirrors .card-painterly > .gem-corner) */
.mascot-frame > .gem-corner {
  position: absolute;
  width: 9px; height: 9px;
  background: radial-gradient(circle at 35% 35%, var(--tj-chandan) 0%, var(--tj-sindoor) 60%, var(--tj-rakta) 100%);
  border: 1px solid var(--tj-kanaka);
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
}
.mascot-frame > .gem-corner--tl { top: 7px;    left: 7px;  }
.mascot-frame > .gem-corner--tr { top: 7px;    right: 7px;
  background: radial-gradient(circle at 35% 35%, var(--tj-chandan) 0%, var(--tj-neel) 60%, #0A1830 100%); }
.mascot-frame > .gem-corner--bl { bottom: 7px; left: 7px;
  background: radial-gradient(circle at 35% 35%, var(--tj-chandan) 0%, var(--tj-marakatha) 60%, #062417 100%); }
.mascot-frame > .gem-corner--br { bottom: 7px; right: 7px;
  background: radial-gradient(circle at 35% 35%, var(--tj-chandan) 0%, var(--tj-kanaka-dk) 60%, #3B2A08 100%); }

/* ---------- Brushstroke hero rule (overrides genz scribble pop) ---------- */
.brushstroke path {
  stroke: var(--tj-kanaka);
  stroke-width: 5;
  filter: none;
}

/* ---------- Section heading sits inside a small toran arch ---------- */
.section-header h2 {
  position: relative;
  display: inline-block;
}

/* ---------- Lorry text — slightly less Gen Z neon, more illuminated ---------- */
.lorry-text {
  color: var(--tj-kanaka);
  -webkit-text-stroke: 1.5px var(--tj-rakta);
  text-shadow:
    2px 2px 0 var(--tj-vyaktitva),
    4px 4px 0 rgba(0, 0, 0, 0.55);
}

/* ---------- Hero Poster Image (inside the painterly mascot frame) ---------- */
.mascot-img-wrap {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  /* Inner shadow stacked over the image edges so it sits inside the frame */
  box-shadow:
    inset 0 0 0 1px rgba(226,183,60,0.35),
    inset 0 0 30px rgba(0,0,0,0.45);
  z-index: 2;
}
.mascot-img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 1;
  filter: contrast(1.06) saturate(1.12);
  /* Crop the bottom strip of the image — removes the Gemini watermark
     (sits in the bottom-right) along with a thin sliver of the bottom edge.
     Tune via the `7%` value: increase to crop more, decrease to crop less. */
  clip-path: inset(0 0 7% 0);
  margin-bottom: -7%; /* pull surrounding box up so cropped area collapses */
}

.mascot-inscription {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: var(--tj-rakta);
  border: 1px solid var(--tj-kanaka);
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 2.8px;
  font-weight: 700;
  color: var(--tj-kanaka);
  border-radius: 4px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 2;
}