/* ====== HERO (cleaner proportions) ====== */
.hero{
  background:var(--secondary);
  padding:18px 0 16px;
}
.hero__shell{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.hero__frame{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
}
.hero__viewport{
  width:100%;
  height: clamp(720px, 85vw, 960px);
  position:relative;
  overflow:hidden;
  background:rgba(0,0,0,.18);
}
.hero__img{
  width:100%;
  height:100%;
  display:block;
  object-fit:fill;
  object-position:center;
  transform:none;
}
.hero__img.is-contain{
  object-fit:contain;
  background:#081760;
}
.hero__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:28px;
  display:grid;
  place-items:center;
  z-index:2;
}
.hero__nav:hover{ background:rgba(0,0,0,.60); }
.hero__nav--left{ left:14px; }
.hero__nav--right{ right:14px; }

.hero__dots{
  display:flex;
  justify-content:center;
  gap:8px;
}
.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.30);
  cursor:pointer;
}
.dot.is-active{ background:var(--primary); border-color:rgba(255,255,255,.40); }

/* ===== HERO: Full-width with small side gap (height unchanged) ===== */
.hero .container{
  width: min(100%, calc(100vw - 44px));
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ====== SECTIONS ====== */
.section{ padding:42px 0; }
.section__head{ max-width:760px; margin:0 auto 22px; text-align:center; }

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:18px;
}
.card{
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  border-radius:var(--radius);
  padding:30px 18px;
  box-shadow:0 12px 28px rgba(0,0,0,.06);

  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height: 190px;
  gap:3px;
}
.card p{
  margin:0 auto 14px;
  max-width: 46ch;
}

/* ✅ Welcome: button FULL WIDTH */
.cards .btn{
  display:flex;
  width:100%;
  justify-content:center;
}

/* ✅ Explore button hover (only button) */
.card .btn{
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.card .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(0,0,0,.14);
  filter: brightness(1.05);
}
.card .btn:active{
  transform: translateY(0px);
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
}

/* ===== Cards: Explore button = Donate Now style, smaller ===== */
.cards .btn.btn--secondary{
  background: var(--primary);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  padding:10px 18px;
  font-size:14px;
  font-weight:600;
  border-radius:999px;
  line-height:1;
  box-shadow:0 10px 18px rgba(0,0,0,.10);
}
.cards .btn.btn--secondary:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:0 14px 24px rgba(0,0,0,.14);
}
.cards .btn.btn--secondary:active{
  transform: translateY(0);
  box-shadow:0 10px 18px rgba(0,0,0,.10);
}

@media (max-width: 980px){
  .cards{ grid-template-columns:1fr; }
}
@media (max-width: 820px){
  .hero__viewport{ height: clamp(260px, 46vw, 420px); }
}
@media (max-width: 520px){
  .hero{ padding:14px 0 12px; }
  .hero__viewport{ height: clamp(220px, 62vw, 320px); }
  .hero__nav{ width:40px; height:40px; font-size:22px; }
}
@media (max-width: 820px){
  .hero .container{ width: min(100%, calc(100vw - 35px)); }
}
@media (max-width: 520px){
  .hero .container{ width: min(100%, calc(100vw - 28px)); }
}

/* ================================
   ADDED SECTIONS – NSS CONSISTENT
================================ */

/* Split section header */
.section__head--split{
  max-width:none;
  text-align:left;
  margin:0 0 22px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.section__text{ max-width:780px; }
.section__actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* subtle tint sections */
.section--tint{
  background:
    radial-gradient(circle at 18% 22%, rgba(255,92,0,.10), transparent 55%),
    radial-gradient(circle at 82% 28%, rgba(0,19,105,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,19,105,.04), rgba(255,92,0,.03));
}

/* BUTTON hover (only on buttons) */
.pageMain .btn{
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
}
.pageMain .btn:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 24px rgba(0,0,0,.14);
  filter: brightness(1.05);
}
.pageMain .btn:active{
  transform: translateY(0);
  box-shadow:0 10px 18px rgba(0,0,0,.10);
}

/* LOCK secondary button style (same as Welcome) */
.pageMain .btn.btn--secondary{
  background: var(--primary);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  padding:10px 18px;
  font-size:14px;
  font-weight:600;
  border-radius:999px;
  line-height:1;
  box-shadow:0 10px 18px rgba(0,0,0,.10);
}

/* IMPORTANT: NO CARD HOVER */
.featureCard, .pubCard, .activityCard, .highlightCard{ transition:none; }
.featureCard:hover, .pubCard:hover, .activityCard:hover, .highlightCard:hover{
  transform:none !important;
  box-shadow: var(--shadow) !important;
  border-color: rgba(2,6,23,.08) !important;
}

/* ===========================
   ✅ CONSISTENT INNER GAPS
   (Welcome section reference)
=========================== */
:root{
  --nss-gap: 10px;         /* equal gaps */
  --nss-gap-lg: 14px;      /* bigger separation */
}

/* remove default margins for predictable spacing */
.featureCard h3, .pubCard h3, .highlightCard h3,
.activityCard__body h3, .founder__content h3 { margin:0; }
.featureCard p, .pubCard p, .highlightCard p,
.activityCard__body p, .founder__content p { margin:0; }

/* ----------------------------
   ABOUT – Feature cards (FINAL + Mobile 1-per-row)
----------------------------- */
.featureGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}

.featureCard{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid rgba(2,6,23,.08);

  padding:30px 18px;          /* same as Welcome */
  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:190px;

  gap:0;                      /* spacing controlled by margins */
}

.featureCard__icon{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;

  margin:0 0 14px 0;          /* icon -> heading gap */

  background:rgba(255,92,0,.12);
  border:1px solid rgba(255,92,0,.22);
  color:var(--secondary);
}

.featureCard h3{ margin:0; }

.featureCard p{
  margin:0 auto 14px;         /* content -> button gap */
  max-width:46ch;
}

.featureCard .btn{
  width:100%;
  display:flex;
  justify-content:center;
}

/* ✅ Mobile: 1 card per row */
@media (max-width: 980px){
  .featureGrid{
    grid-template-columns:1fr;
  }
}


/* ----------------------------
   ABOUT (Split + Simple Auto Slider) – dots only (NO conflict)
----------------------------- */
.aboutSplit{
  --aboutH: 320px;
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap:16px;
  margin-top:18px;
  align-items: stretch;
}

/* Left card equals right height */
.aboutSplit__content{
  height: var(--aboutH);
  background:#fff;
  border-radius:var(--radius);
  border:1px solid rgba(2,6,23,.08);
  box-shadow:var(--shadow);
  padding:22px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.aboutQuote{
  margin:0;
  padding:14px 14px;
  border-radius:14px;
  background:rgba(0,19,105,.06);
  border:1px solid rgba(0,19,105,.12);
  font-style:italic;
  color: var(--secondary);
  line-height:1.6;
}
.aboutQuote span{
  display:block;
  margin-top:8px;
  font-style:normal;
  font-weight:600;
  color: var(--secondary);
}

.aboutClamp{
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

/* Right media box (clean, no gradient overlay) */
.aboutSplit__media{
  position:relative;
  height: var(--aboutH);
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(2,6,23,.08);
  box-shadow:var(--shadow);
  background:#fff;
}

/* viewport + image fill perfectly */
.aboutViewport{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:18px;
}
.aboutImg{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;        /* ✅ full fill */
  object-position:center;  /* ✅ centered */
}

/* dots bottom center */
.aboutDots{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:10px;
  display:flex;
  gap:8px;
  z-index:5;
}

/* dot styling */
.aboutDots .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:0;
  background:rgba(2,6,23,.20);
  cursor:pointer;
}
.aboutDots .dot.is-active{
  background:rgba(255,92,0,.95);
}

/* Mobile */
@media (max-width: 980px){
  .aboutSplit{
    grid-template-columns: 1fr;
    --aboutH: 260px;
  }
  .aboutClamp{ -webkit-line-clamp: 5; }
}





/* ----------------------------
   FOUNDER – Final (Fixed height + quote corners + HTML rotator)
----------------------------- */
.founder{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:16px;
  margin-top:18px;
}

/* Left media */
.founder__media{
  position:relative;
  height:420px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(2,6,23,.08);
  box-shadow:var(--shadow);
  background:
    radial-gradient(circle at 20% 25%, rgba(255,92,0,.22), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(0,19,105,.18), transparent 60%),
    linear-gradient(135deg, rgba(0,19,105,.12), rgba(255,92,0,.08));
}

.founder__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.founder__overlay{
  position:absolute;
  inset:0;
  background:transparent;
  pointer-events:none;
}

/* Right content (match height with left box) */
.founder__content{
  height:420px;
  background:#fff;
  border-radius:var(--radius);
  border:1px solid rgba(2,6,23,.08);
  box-shadow:var(--shadow);
  padding:18px;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* ✅ Equal gaps: Title -> Bio -> Pills */
.founder__content h3{
  margin:14px 0;              /* equal top & bottom */
}

.founder__bio{
  margin:14px 0;              /* equal top & bottom */
  max-width:46ch;

  /* ✅ 5-line ellipsis */
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.quote{
  width:100%;
  position:relative;
  border-radius:14px;
  background:rgba(0,19,105,.05);
  border:1px solid rgba(0,19,105,.10);

  /* content padding (text box padding) */
  padding:16px 44px;
  margin:0;

  /* ✅ separate offsets for each quote mark */
  --qOpenTop: 16px;
  --qOpenLeft: 15px;

  --qCloseBottom: -6px;
  --qCloseRight: 15px;
}

/* hide original marks from markup */
.quote__mark{ display:none; }

/* common base */
.quote::before,
.quote::after{
  position:absolute;
  font-family:"Cinzel",serif;
  color:var(--primary);
  font-weight:800;
  font-size:28px;
  line-height:1;
  pointer-events:none;
}

/* ✅ OPEN quote (top-left) */
.quote::before{
  content:"“";
  top:var(--qOpenTop);
  left:var(--qOpenLeft);
}

/* ✅ CLOSE quote (bottom-right) */
.quote::after{
  content:"”";
  bottom:var(--qCloseBottom);
  right:var(--qCloseRight);
}

/* ✅ Quotes lines space a bit more */
.quote__item,
.quote__text{
  line-height:1.45;
}


/* ✅ HTML rotator (NO JS) */
.quote__rotator{
  position:relative;
  height:52px;                 /* keeps quote box stable */
  display:flex;
  align-items:center;
  justify-content:center;
}

.quote__item{
  position:absolute;
  left:0;
  right:0;
  margin:0;
  max-width:46ch;
  text-align:center;
  line-height:1.25;

  opacity:0;
  transform:translateY(6px);
  animation: founderQuoteCycle 16s infinite;
}

/* 4 quotes = 4 steps (16s total) */
.quote__item:nth-child(1){ animation-delay:0s; }
.quote__item:nth-child(2){ animation-delay:4s; }
.quote__item:nth-child(3){ animation-delay:8s; }
.quote__item:nth-child(4){ animation-delay:12s; }

@keyframes founderQuoteCycle{
  0%   { opacity:0; transform:translateY(6px); }
  10%  { opacity:1; transform:translateY(0); }
  40%  { opacity:1; transform:translateY(0); }
  50%  { opacity:0; transform:translateY(-6px); }
  100% { opacity:0; transform:translateY(-6px); }
}

/* Pills */
.pillRow{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:14px 0 16px 0;       /* ✅ equal spacing look */
}

.pill{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(0,19,105,.06);
  border:1px solid rgba(0,19,105,.18);
  color:var(--secondary);
  font-weight:600;
  font-size:.92rem;
}

/* ✅ Buttons always at bottom */
.ctaRow{
  margin-top:auto;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.ctaRow .btn{
  width:100%;
  display:flex;
  justify-content:center;
}

/* Mobile */
@media (max-width:980px){
  .founder{ grid-template-columns:1fr; }
  .founder__media{ height:340px; }
  .founder__content{ height:auto; }
  .quote__rotator{ height:auto; }
  .quote__item{ position:static; animation:none; opacity:1; transform:none; }
}

@media (max-width:520px){
  .ctaRow{ grid-template-columns:1fr; }
}




/* ----------------------------
   PUBLICATIONS – Grid (Complete)
----------------------------- */
.pubGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}

/* ✅ Publications card padding = Welcome/About */
.pubCard{
  background:#fff;
  border-radius:var(--radius);
  border:1px solid rgba(2,6,23,.08);
  box-shadow:var(--shadow);

  padding:30px 18px;                 /* ✅ SAME as Welcome + About */
  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;                              /* ✅ we control gaps via margins */
}

/* ✅ meta row stays on top */
.pubCard__meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;

  margin:0 0 14px 0;                  /* ✅ like icon->title gap */
}

/* tags (unchanged look) */
.tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:.84rem;
  background:rgba(255,92,0,.14);
  border:1px solid rgba(255,92,0,.26);
  color:var(--secondary);
}
.tag--soft{
  background:rgba(0,19,105,.06);
  border:1px solid rgba(0,19,105,.18);
}

/* ✅ title + content spacing */
.pubCard h3{
  margin:0 0 3px 0;                   /* ✅ same tiny gap like Welcome */
}
.pubCard p{
  margin:0;
}
.pubCard p.muted{
  margin:0 0 14px 0;                  /* ✅ content -> button gap SAME */
  max-width:46ch;
}

/* ✅ only ONE button, full width, centered */
.pubCard__actions{
  width:100%;
  display:flex;
  justify-content:center;
  margin:0;
}
.pubCard__actions .btn{
  width:100%;
  display:flex;
  justify-content:center;
}

/* responsive */
@media (max-width:980px){
  .pubGrid{ grid-template-columns:1fr; }
}


/* ----------------------------
   ACTIVITIES – Carousel (Complete)
----------------------------- */
.carousel{
  position:relative;
  margin-top:18px;
  overflow:visible;                 /* ✅ arrows ko container ke bahar dikhne do */
}

/* viewport keeps overflow hidden */
.carousel__viewport{
  overflow:hidden;
  border-radius:var(--radius);
}

/* track = horizontal scroll + snap */
.carousel__track{
  display:flex;
  gap:14px;
  padding:2px;

  /* ❌ remove scroll */
  overflow:visible;
  scroll-snap-type:none;
  -webkit-overflow-scrolling: auto;
  scroll-behavior:auto;

  /* ✅ transform slider */
  will-change: transform;
  transition: transform .45s ease;

  /* better drag feel */
  cursor: grab;
  user-select:none;
  touch-action: pan-y;
}
.carousel__track:active{ cursor: grabbing; }

.carousel__track::-webkit-scrollbar{ display:none; }

/* ✅ card width per view */
.activityCard{
  min-width:calc((100% - 28px)/3);
  background:#fff;
  border-radius:var(--radius);
  border:1px solid rgba(2,6,23,.08);
  box-shadow:var(--shadow);
  overflow:hidden;
  scroll-snap-align:start;
}

.activityCard__img{
  height:190px;
  background:rgba(0,0,0,.04);
}
.activityCard__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ✅ inner spacing locked like Welcome/About system */
.activityCard__body{
  padding:30px 18px;               /* ✅ same feel as Welcome cards */
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0;                            /* ✅ margins control gaps */
}
.activityCard__body h3{ margin:0; }
.activityCard__body p{ margin:0; }

.activityCard__body h3{
  margin:0 0 3px 0;                 /* ✅ title -> content small */
}
.activityCard__body p.muted{
  margin:0 0 14px 0;                /* ✅ content -> button = 14px */
  max-width:46ch;
}

/* ✅ button full width */
.activityCard__body .btn{
  width:100%;
  display:flex;
  justify-content:center;
}

/* ============================
   ✅ ARROWS (SVG IMG ONLY)
   - NO circle bg
   - Bigger size
   - Orange theme color via filter
============================ */

/* NOTE: filter works on <img> even if SVG has hardcoded colors */

.carousel__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);

  /* ✅ clickable area (but invisible) */
  width:64px;
  height:64px;

  /* ✅ remove circle look */
  background:transparent;
  border:none;
  padding:0;
  border-radius:0;

  cursor:pointer;
  display:grid;
  place-items:center;
  z-index:5;

  /* ✅ smooth */
  transition:transform .18s ease, filter .18s ease, opacity .18s ease;
}

/* ✅ move arrows outside */
.carousel__nav--left{ left:-68px; }
.carousel__nav--right{ right:-68px; }

/* ✅ SVG size (THIS is the main size control) */
.carousel__navIcon{
  width:52px;     /* ✅ bigger */
  height:52px;    /* ✅ bigger */
  display:block;

  /* ✅ orange color */
  filter: var(--nss-orange-filter);

  /* ✅ crisp */
  image-rendering:auto;
}

/* hover = little pop */
.carousel__nav:hover{
  transform:translateY(-50%) scale(1.07);
}
.carousel__nav:hover .carousel__navIcon{
  /* slightly deeper orange on hover */
  filter: var(--nss-orange-filter) drop-shadow(0 10px 18px rgba(2,6,23,.18));
}

/* active */
.carousel__nav:active{
  transform:translateY(-50%) scale(1.03);
}

/* disabled */
.carousel__nav:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.carousel__nav:disabled .carousel__navIcon{
  filter: grayscale(1) opacity(.75);
}

/* dots */
.carousel__dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:12px;
}
.carousel__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(0,19,105,.25);
  background:rgba(0,19,105,.10);
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.carousel__dot.is-active{
  background:rgba(255,92,0,.85);
  border-color:rgba(255,92,0,.95);
  transform:scale(1.2);
}

/* responsive per-view widths */
@media (max-width:980px){
  .activityCard{ min-width:calc((100% - 14px)/2); }
  .carousel__nav--left{ left:-62px; }
  .carousel__nav--right{ right:-62px; }
  .carousel__navIcon{ width:48px; height:48px; }
}
@media (max-width:820px){
  .carousel__nav--left{ left:-54px; }
  .carousel__nav--right{ right:-54px; }
}
@media (max-width:640px){
  .carousel__nav{ display:none; }     /* swipe on mobile */
  .activityCard{ min-width:100%; }
}






/* ----------------------------
   CALENDAR – Table (Centered headers + cells + Details button)
----------------------------- */

.tableShell{
  margin-top:18px;
  background:#fff;
  border-radius:var(--radius);
  border:1px solid rgba(2,6,23,.08);
  overflow:hidden;

  box-shadow:
    0 22px 40px rgba(0,0,0,.08),
    0 10px 18px rgba(0,0,0,.06),
    0 0 0 1px rgba(255,255,255,.55) inset;
}

.tableTools{
  padding:30px 18px 0;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.tableSearch{
  width:100%;
}

/* full width input */
.tableSearch input{
  width:100%;
  max-width:none;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(2,6,23,.14);
  outline:none;
  font-family:inherit;
  background:#fff;
}

.tableSearch input:focus{
  border-color:rgba(255,92,0,.55);
  box-shadow:0 0 0 4px rgba(255,92,0,.14);
}

.tableWrap{
  overflow:auto;
  padding:18px;
}

.table{
  width:100%;
  border-collapse:collapse;
  min-width:680px;
}

/* ✅ Center the column headers */
.table thead th{
  text-align:center;               /* ✅ changed */
  font-weight:700;
  color:var(--secondary);
  padding:12px 10px;
  border-bottom:1px solid rgba(2,6,23,.10);
}

/* ✅ Center the row cells */
.table tbody td{
  text-align:center;               /* ✅ changed */
  padding:12px 10px;
  border-bottom:1px solid rgba(2,6,23,.08);
  color:var(--text);
  vertical-align:middle;
}

.table tbody tr:hover td{
  background:rgba(0,19,105,.04);
}

/* ✅ Action column centered + button centered */
.table__actions{
  width:160px;
  text-align:center;               /* ✅ changed */
}
.table__actions .btn{
  display:inline-flex;             /* ✅ keeps button nicely centered */
  justify-content:center;
  align-items:center;
}

/* ✅ optional: slightly tighter on small screens */
@media (max-width:520px){
  .tableTools{ padding:22px 14px 0; }
  .tableWrap{ padding:14px; }
}



/* ----------------------------
   SAMMILANI – Cards (Welcome/About spacing system)
   ✅ same outer padding (30/18)
   ✅ equal top/bottom/side feel
   ✅ controlled gaps like Welcome/About (icon/title/content/button)
----------------------------- */

.highlightGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}

.highlightCard{
  background:#fff;
  border-radius:var(--radius);
  border:1px solid rgba(2,6,23,.08);

  /* ✅ same as Welcome/About */
  padding:30px 18px;
  text-align:center;

  box-shadow:
    0 22px 40px rgba(0,0,0,.08),
    0 10px 18px rgba(0,0,0,.06),
    0 0 0 1px rgba(255,255,255,.55) inset;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  min-height:190px;
  gap:0; /* ✅ margins will control spacing */
}

/* ✅ reset default margins for predictable spacing */
.highlightCard h3{ margin:0; }
.highlightCard p{ margin:0; }

/* ✅ title -> content small gap (same pattern as others) */
.highlightCard h3{
  margin:0 0 3px 0;
}

/* ✅ content -> button = 14px (same as Welcome/About) */
.highlightCard p.muted{
  margin:0 0 14px 0;
  max-width:46ch;
}

/* ✅ button full width like Welcome/About */
.highlightCard .btn{
  width:100%;
  display:flex;
  justify-content:center;
}

/* ----------------------------
   RESPONSIVE
----------------------------- */
@media (max-width:980px){
  .highlightGrid{ grid-template-columns:1fr; }
}




/* =========================================================
   HOME: Card content should stay compact (2-line limit)
   Add at the END of assets/css/pages/home.css
========================================================= */

/* 2-line clamp for all card descriptions on Home */
.card .muted,
.featureCard .muted,
.pubCard .muted,
.activityCard .muted,
.highlightCard .muted{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* ✅ 2 lines only */
  overflow: hidden;
}

/* Optional: Keep headings also controlled if needed */
.card .h3,
.featureCard .h3,
.pubCard .h3,
.activityCard .h3,
.highlightCard .h3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;   /* ✅ 1 line title */
  overflow: hidden;
}

/* Home section intro text should not grow too much */
.section__head .muted{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;   /* short intro */
  overflow: hidden;
}