/* ---------------------------------------------------------
   RajeCalendar — Hero Slider Section styles
   Depends on the CSS custom properties defined in css/styles.css
   (--paper, --paper-raised, --ink, --ink-soft, --navy, --navy-deep,
   --maroon, --gold, --line, --line-soft, --serif, --sans, --mono).
   Load styles.css before this file.
--------------------------------------------------------- */

.hero-slider-hero{
  position:relative;
  min-height:85vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  padding:48px 0 56px;
  background:linear-gradient(to bottom, #FBF3E9 0%, var(--paper) 65%, var(--paper-raised) 100%);
  border-bottom:1px solid var(--line);
}

/* soft decorative glow, echoes the gazette-seal motif used elsewhere on the site */
.hero-slider-hero::before{
  content:"";
  position:absolute;
  top:-120px;
  width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(140,47,57,0.06) 0%, transparent 70%);
  pointer-events:none;
}
.hero-slider-hero::after{
  content:"";
  position:absolute;
  bottom:-160px; left:-160px;
  width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(169,128,63,0.08) 0%, transparent 70%);
  pointer-events:none;
}

.hero-slider-inner{ position:relative; z-index:1; }

.hero-slider-title{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(26px, 3.6vw, 40px);
  line-height:1.15;
  color:var(--navy-deep);
  margin:0 0 8px;
}
.hero-slider-title .hi-accent{ color:var(--maroon); }

.hero-slider-sub{
  font-family:var(--mono);
  font-size:13px;
  color:var(--ink-soft);
  margin:0 0 26px;
}

/* ---------- Slider ---------- */
.slider{
  position:relative;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-top:4px solid var(--maroon);
  padding:24px;
}
.slider-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  gap:24px;
  scrollbar-width:thin;
  padding-bottom:6px;
}
.slider-track::-webkit-scrollbar{ height:6px; }
.slider-track::-webkit-scrollbar-thumb{ background:var(--line); }

.month-slide{
  scroll-snap-align:start;
  flex:0 0 100%;
  max-width:560px;
}
@media(min-width:760px){
  .month-slide{ flex:0 0 46%; }
}
.month-slide .month-band-img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line); border-bottom:none;
}

.dow-row{
  display:grid; grid-template-columns:repeat(7,1fr);
  border:1px solid var(--line); border-top:none; border-bottom:none;
  background:#fff;
}
.dow-row div{
  font-family:var(--mono); font-size:10px; text-align:center;
  padding:6px 0; color:var(--ink-soft); border-bottom:1px solid var(--line-soft);
}
.day-grid{ display:grid; grid-template-columns:repeat(7,1fr); }
.day-cell{
  aspect-ratio:1/0.95;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:11.5px; position:relative;
  border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  background:#fff; padding:2px; text-align:center;
}
.day-cell.blank{ background:#FAFAF7; }
.day-cell.sun .dnum{ color:var(--maroon); }
.day-cell.gazetted{ background:#F4E3E3; }
.day-cell.restricted{ background:#F3EAD3; }
.dnum{ font-weight:600; }
.dtag{
  font-size:7px; line-height:1.1; font-family:var(--mono); color:var(--ink-soft);
  display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.slider-nav{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.slider-nav button{
  font-family:var(--sans); font-size:14px; font-weight:600;
  border:1px solid var(--line); background:#fff; padding:6px 14px; cursor:pointer;
}
.slider-nav button:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

.swipe-hint{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-top:10px; }

/* ---------- Thumbnails ---------- */
.hero-slider-thumbs-wrap{ margin-top:36px; }
.hero-slider-thumbs-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; margin-bottom:16px; flex-wrap:wrap;
}
.hero-slider-thumbs-head h3{
  font-family:var(--serif); font-size:19px; margin:0; color:var(--navy-deep);
}
.hero-slider-thumbs-head .hint{
  font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink-soft);
}

.thumb-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px;
}
.thumb{
  background:var(--paper-raised); border:1px solid var(--line);
  padding:10px; text-align:center; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer;
}
.thumb:hover{ border-color:var(--navy); }
.thumb.active{ border-color:var(--maroon); background:#FBF3E9; }
.thumb-icon{ width:44px; height:44px; }
.tname{ font-family:var(--serif); font-size:13.5px; }

@media (prefers-reduced-motion: reduce){
  .slider-track{ scroll-behavior:auto; }
}

.hero-slider-pending{
  padding:48px 24px;
  text-align:center;
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:14px;
}