/* ─── CSS VARIABLES (matching senseware.co.in/IIPT palette) ─── */
:root {
  --clr-primary:    #1a3a4a;   /* deep teal/navy */
  --clr-secondary:  #0198cf;   /* peace green */
  --clr-accent:     #fcab20;   /* warm gold */
  --clr-accent2:    #e8c875;   /* light gold */
  --clr-bg:         #f5f2ec;   /* warm off-white */
  --clr-bg-dark:    #0e2233;   /* darkest navy */
  --clr-text:       #1e1e1e;
  --clr-muted:      #6b7280;
  --clr-white:      #ffffff;
  --clr-border:     #ddd5c5;

 /* --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-heading: 'Raleway', sans-serif;
  --ff-body:    'Source Sans 3', sans-serif;

  --fs-h1: clamp(2.4rem, 5vw, 4.2rem);
  --fs-h2: clamp(1.8rem, 3.5vw, 2.8rem);
  --fs-h3: clamp(1.3rem, 2.5vw, 1.7rem);
  --fs-h4: clamp(1.1rem, 2vw, 1.35rem);
  --fs-h5: 1.05rem;
  --fs-h6: 0.9rem;
  --fs-body: 1rem;*/
  --fs-sm:  0.875rem;

  --radius: 4px;
  --radius-lg: 10px;
  --shadow-card: 0 4px 20px rgba(0,0,0,.10);
  --shadow-hover: 0 12px 40px rgba(0,0,0,.18);
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── NEWSLETTER GRID – 3 COLUMNS ─── */
.newsletter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 760px) {
  .newsletter-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .newsletter-grid { grid-template-columns: 1fr; }
}

/* ─── NEWSLETTER CARD ─── */
.nl-card {
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
  border: 1px solid #f3f3f3;
  position: relative;
}
.nl-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

/* ── Solid colour header strip ── */
.nl-card-top {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  color: #fff;
}

/* Solid color variants per card */
.nl-card .nl-card-top { background: #0198cf; }
/*.nl-card:nth-child(1)  .nl-card-top { background: #1a3a4a; }
.nl-card:nth-child(2)  .nl-card-top { background: #2d7d5f; }
.nl-card:nth-child(3)  .nl-card-top { background: #b07d2a; }
.nl-card:nth-child(4)  .nl-card-top { background: #2d3f6b; }
.nl-card:nth-child(5)  .nl-card-top { background: #5a3e7a; }
.nl-card:nth-child(6)  .nl-card-top { background: #1a3a4a; }
.nl-card:nth-child(7)  .nl-card-top { background: #7a3e2a; }
.nl-card:nth-child(8)  .nl-card-top { background: #1a6b7a; }
.nl-card:nth-child(9)  .nl-card-top { background: #2d7d5f; }
.nl-card:nth-child(10) .nl-card-top { background: #b07d2a; }*/

/* Date block inside the strip */
.nl-date-block {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.18);
  border-radius: 6px;
  width: 52px; height: 54px;
  font-family: var(--ff-heading); font-weight: 800; line-height: 1.1;
}
.nl-date-block .day { font-size: 22px; line-height: 24px; display: block; }
.nl-date-block .mon { font-size: 15px; text-transform: uppercase; opacity: 0.85; margin-top: 1px; }

/* Tag & title inside strip */
.nl-top-meta { display: flex; flex-direction: column; gap: 3px; }

.nl-tag {
  font-family: var(--ff-heading); font-size: 13px; font-weight: 700; letter-spacing: .04px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.nl-top-label {
  font-family: var(--ff-heading); font-size: 18px; font-weight: 700;
  color: #fff; line-height: 26px;
}

/* Divider line between strip and body */
.nl-card-body {
  padding: 16px 16px 20px;
  flex: 1; display: flex; flex-direction: column;
  border-top: 3px solid rgba(0,0,0,0.06);
}

.nl-card-body h4 {
  color: var(--clr-primary);
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  margin-bottom: 10px;
  min-height: 56px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nl-card-body p {
  /* font-size: 0.85rem; */
  /* color: var(--clr-muted); */
  /* line-height: 1.6; */
  margin-bottom: 16px;
  flex: 1;
  /* text-align: justify; */
}

.nl-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--clr-border);
}

.nl-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-heading);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  /* letter-spacing: 0.00em; */
  color: var(--clr-secondary);
  transition: gap var(--transition), color var(--transition);
}
.nl-read-btn:hover { color: var(--clr-accent); gap: 10px; }
.nl-read-btn svg { width: 14px; height: 14px; }

.nl-format-badge {
  font-size: 0.65rem; font-family: var(--ff-heading); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  background: #f0ebe0; color: var(--clr-muted);
  padding: 3px 8px; border-radius: 20px;
}

/* Featured card */
.nl-card.featured {   border-color: #f3f3f3; }
.nl-card.featured::before {
  content: 'LATEST';
  position: absolute; top: 14px; right: 14px;
  background: var(--clr-accent); color: #fff;
  font-family: var(--ff-heading); font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px; z-index: 10;
}

/* ─── SIDEBAR ─── */
.sidebar { display: flex; flex-direction: column; gap: 32px; }

.sidebar-widget {
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border: 1px solid var(--clr-border);
}
.widget-header {
  background: var(--clr-primary);
  padding: 14px 20px;
}
.widget-header h5 { color: var(--clr-white); font-size: 0.78rem; }
.widget-body { padding: 20px; }

/* Subscribe widget */
.subscribe-widget { background: linear-gradient(160deg, var(--clr-bg-dark), var(--clr-primary)); }
.subscribe-widget .widget-header { background: transparent; border-bottom: 1px solid rgba(255,255,255,.1); }
.subscribe-widget .widget-body { padding: 24px 20px; }
.subscribe-widget p { color: rgba(255,255,255,0.7); font-size: 0.88rem; margin-bottom: 18px; }
.subscribe-form input {
  width: 100%; padding: 10px 14px; border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius); background: rgba(255,255,255,.1); color: #fff;
  font-family: var(--ff-body); font-size: 0.875rem; margin-bottom: 10px; outline: none;
}
.subscribe-form input::placeholder { color: rgba(255,255,255,.5); }
.subscribe-form input:focus { border-color: var(--clr-accent); }
.subscribe-form button {
  width: 100%; padding: 11px; border: none; border-radius: var(--radius);
  background: var(--clr-accent); color: #fff;
  font-family: var(--ff-heading); font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer;
  transition: background var(--transition);
}
.subscribe-form button:hover { background: #a87328; }

/* Quick links */
.quick-links { list-style: none; }
.quick-links li {
  border-bottom: 1px solid var(--clr-border); last-child: { border-bottom: none; }
}
.quick-links li:last-child { border-bottom: none; }
.quick-links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; font-size: 0.875rem; color: var(--clr-text);
  font-family: var(--ff-heading); font-weight: 500;
  transition: color var(--transition);
}
.quick-links a:hover { color: var(--clr-secondary); }
.quick-links a span { font-size: 0.8rem; color: var(--clr-muted); }

/* Stats mini */
.stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-mini { text-align: center; padding: 14px 8px; background: var(--clr-bg); border-radius: var(--radius); }
.stat-mini strong { display: block; font-family: var(--ff-display); font-size: 1.8rem; font-weight: 700; color: var(--clr-primary); line-height: 1; }
.stat-mini span { font-size: 0.72rem; font-family: var(--ff-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--clr-muted); }

/* ─── FOOTER ─── */
.site-footer {
  background: var(--clr-bg-dark);
  color: rgba(255,255,255,0.65);
  padding: 60px 24px 0;
}
.footer-grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 48px;
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand { }
.footer-brand .logo-icon { margin-bottom: 16px; }
.footer-brand p { font-size: 0.875rem; line-height: 1.7; max-width: 260px; }
.footer-col h6 { color: var(--clr-accent2); margin-bottom: 16px; font-size: 0.72rem; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { font-size: 0.875rem; color: rgba(255,255,255,0.6); transition: color var(--transition); }
.footer-links a:hover { color: var(--clr-accent2); }
.footer-bottom {
  max-width: 1240px; margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 20px 0;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { font-size: 0.8rem; }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: 0.8rem; color: rgba(255,255,255,0.5); transition: color var(--transition); }
.footer-bottom-links a:hover { color: var(--clr-accent2); }

/* ─── LOAD ANIMATION ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nl-card {
  animation: fadeUp 0.5s ease both;
}
.nl-card:nth-child(1) { animation-delay: 0.05s; }
.nl-card:nth-child(2) { animation-delay: 0.12s; }
.nl-card:nth-child(3) { animation-delay: 0.19s; }
.nl-card:nth-child(4) { animation-delay: 0.26s; }
.nl-card:nth-child(5) { animation-delay: 0.33s; }
.nl-card:nth-child(6) { animation-delay: 0.40s; }
.nl-card:nth-child(7) { animation-delay: 0.47s; }
.nl-card:nth-child(8) { animation-delay: 0.54s; }
.nl-card:nth-child(9) { animation-delay: 0.61s; }
.nl-card:nth-child(10) { animation-delay: 0.68s; }
/* Session 4: web and PDF badges */
.nl-badges { display: inline-flex; gap: 6px; align-items: center; }
a.nl-format-badge { text-decoration: none; background: #ee6c4d; color: #fff; }
a.nl-format-badge:hover { background: #0d2d6e; color: #fff; }