/* =========================================================
   EDUCOAST HOMEPAGE CSS (clean, stable, not over-responsive)
   - calm education theme (paper + ink)
   - small icons + subtle meta
   - no “over-responsive” clamp spam
   - sticky sidebar aligned with main column
   ========================================================= */

:root{
  --brand:#2563eb;
  --brand-dark:#1e40af;
  --accent:#38bdf8;

  --bg:#f6f8fc;
  --paper:#ffffff;
  --paper-2:#fbfdff;

  --text:#0f172a;
  --muted:#64748b;

  --border: rgba(15,23,42,.10);
  --border-2: rgba(15,23,42,.14);

  --r12:12px;
  --r16:16px;
  --r20:20px;

  --shadow-1: 0 1px 2px rgba(15,23,42,.06);
  --shadow-2: 0 14px 36px rgba(15,23,42,.12);

  --container: 1200px;

  /* spacing */
  --s1:8px;
  --s2:12px;
  --s3:16px;
  --s4:20px;
  --s5:24px;
  --s6:32px;
  --s7:40px;
  --s8:56px;

  /* typography (stable, minimal responsiveness) */
  --fs-xs: 12.5px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 32px;

  --ring: 0 0 0 4px rgba(37,99,235,.18);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: var(--fs-md);
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* subtle “paper grid” feel, very light */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background:
    linear-gradient(to right, rgba(37,99,235,.045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(to bottom, rgba(15,23,42,.035) 1px, transparent 1px) 0 0 / 48px 48px;
  opacity:.45;
  mask-image: radial-gradient(circle at 40% 10%, rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.12) 70%, rgba(0,0,0,0) 100%);
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

img{ max-width:100%; display:block; }

a{
  color: inherit;
  text-decoration:none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease, opacity 160ms ease;
}
a:focus-visible{
  outline:none;
  box-shadow: var(--ring);
  border-radius: 14px;
}

.main-shell{
  padding: 0 0 var(--s8);
}

/* =========================================================
   META (quiet, not shouting)
   ========================================================= */
.meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.meta .meta-item{
  display:inline-flex;
  align-items:center;
  gap: 7px;
}
.meta .meta-dot{
  opacity: .65;
}
.meta svg.lucide{
  width: 13px;
  height: 13px;
  opacity: .75;
}

/* for hero (on dark) */
.meta-on-dark{
  color: rgba(255,255,255,.86);
}
.meta-on-dark .meta-dot{ opacity:.75; }
.meta-on-dark i[data-lucide]{ opacity:.92; }

/* =========================================================
   HERO
   ========================================================= */
.hero-grid{
  display:grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--s5);
  margin: var(--s6) 0 var(--s5);
  align-items:start;
}

.hero-featured{
  position: relative;
  height: 460px;
  border-radius: var(--r20);
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: var(--shadow-2);
}

.hero-img{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 520ms ease;
  filter: saturate(1.05) contrast(1.03);
}
.hero-featured:hover .hero-img{
  transform: scale(1.08);
}

.hero-overlay{
  position:absolute;
  inset: auto 0 0 0;
  padding: 26px;
  background: linear-gradient(
    to top,
    rgba(11,18,32,.92) 0%,
    rgba(11,18,32,.62) 52%,
    rgba(11,18,32,.12) 100%
  );
}

.badge,
.chip,
.badge-glass{
  display:inline-flex;
  align-items:center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .35px;
  text-transform: uppercase;
}

/* glass chip for hero */
.badge-glass{
  color:#fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}

.hero-title{
  margin: 12px 0 0;
  color:#fff;
  font-size: var(--fs-2xl);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 720;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}

/* hero sidebar cards */
.hero-sidebar{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.sidebar-card,
.mini-card{
  display:grid;
  grid-template-columns: 150px 1fr; /* image | content */
  align-items: stretch;           /* IMPORTANT */
  padding: 0;
  border-radius: 16px;
  overflow: hidden;               /* clips image to card */
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}

.mini-thumb{
  width: 100% !important;
  height: 100%;                   /* KEY LINE */
  min-height: 100%;
  background-size: cover;
  background-position: center;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

.mini-body{
  padding: 14px;
  display:flex;
  flex-direction: column;
  justify-content: center;        /* optional: centers text vertically */
}

.sidebar-card:hover,
.mini-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: rgba(37,99,235,.22);
}

.sidebar-thumb,
.mini-thumb{
  width: 86px;
  height: 86px;
  background-size:cover;
  background-position:center;
  border: 1px solid rgba(15,23,42,.08);
}

.sidebar-info,
.mini-body{
  min-width:0;
}

.cat-label,
.mini-cat{
  display:inline-flex;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: var(--brand);
  opacity: .95;
}

.sidebar-info h3,
.mini-title{
  margin: 6px 0 0;
  font-size: var(--fs-lg);
  line-height: 1.25;
  font-weight: 650;
}

/* =========================================================
   LAYOUT WRAPPER + STICKY
   ========================================================= */
.layout-wrapper{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap: var(--s6);
  align-items:start; /* IMPORTANT: same level */
  margin-top: var(--s6);
}

.main-content{
  padding-bottom: var(--s8);
}

/* sticky sidebar aligned with content start */
.sidebar-courses{
  align-self:start;
  position: relative;
}

/* adjust top if you have a fixed header */
.course-widget{
  position: sticky;
  top: 32px;
  border-radius: var(--r20);
  background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
  color:#fff;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-2);
  padding: 18px;
}

/* =========================================================
   SECTION HEADER
   ========================================================= */
.section-block{
  margin-bottom: var(--s7);
}

.section-title{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 0 0 var(--s3);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing:-.01em;
}
.section-title i[data-lucide]{
  width: 18px;
  height: 18px;
}

/* =========================================================
   ALERTS / RECENTLY ADDED
   ========================================================= */
.alerts-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
}

.alert-item,
.alert-card{
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r16);
  box-shadow: var(--shadow-1);
  padding: 16px;
}

.alert-item:hover,
.alert-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: rgba(37,99,235,.22);
}

.alert-content{ min-width:0; }

.alert-cat{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 650;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.14);
  color: var(--brand-dark);
  letter-spacing: .2px;
}

.alert-item h4,
.alert-title{
  margin: 12px 0 0;
  font-size: var(--fs-lg);
  line-height: 1.25;
  font-weight: 650;
}

/* if you’re using the older alert-item with chevron */
.alert-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}
.alert-item > i[data-lucide]{
  width: 16px;
  height: 16px;
  opacity: .75;
  margin-top: 4px;
}

/* =========================================================
   CATEGORY WIDGETS
   ========================================================= */
.category-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--s6);
}

.cat-widget{
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r20);
  padding: 18px;
  box-shadow: var(--shadow-1);
}

.cat-widget:hover{
  box-shadow: var(--shadow-2);
  border-color: rgba(37,99,235,.18);
}

.widget-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.widget-head h3{
  margin:0;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing:-.01em;
}

.widget-head a{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand);
  white-space:nowrap;
}
.widget-head a i[data-lucide]{
  width: 16px;
  height: 16px;
}
.widget-head a:hover{
  color: var(--brand-dark);
  transform: translateX(2px);
}

.widget-featured{
  display:block;
  border-radius: var(--r16);
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
}
.widget-featured:hover{
  border-color: rgba(37,99,235,.18);
}

.widget-featured img{
  width:100%;
  height: 200px;
  object-fit: cover;
}

.widget-feat-body{
  padding: 14px;
}

.widget-feat-body h4{
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.25;
}

.widget-feat-body p{
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.55;
}

/* list */
.widget-list{
  margin-top: 14px;
  border-top: 1px solid rgba(15,23,42,.08);
}

.widget-list-item,
.list-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px dashed rgba(15,23,42,.10);
}

.widget-list-item:hover,
.list-row:hover{
  transform: translateX(2px);
}

.widget-list-item span,
.list-title{
  display:block;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
  min-width:0;
}

.widget-list-item i[data-lucide],
.list-row i[data-lucide]{
  width: 16px;
  height: 16px;
  opacity: .75;
}

/* If you kept the new list structure (.list-left etc.) */
.list-left{ min-width:0; }

/* =========================================================
   COURSES SIDEBAR
   ========================================================= */
.course-head{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.course-head i[data-lucide]{
  width: 18px;
  height: 18px;
  color: var(--accent);
  margin-top: 2px;
}

.course-head h3{
  margin:0;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing:.2px;
  text-transform: none;
  text-transform: uppercase;
}

.course-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.course-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.course-row span{ min-width:0; }

.course-row i[data-lucide]{
  width: 16px;
  height: 16px;
  opacity: .9;
}

.course-row:hover{
  background: rgba(56,189,248,.92);
  color:#071021;
  border-color: rgba(56,189,248,.65);
  transform: translateX(4px);
}

.course-foot{
  display:block;
  margin-top: 14px;
  text-align:center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: .25px;
  color: rgba(226,232,240,.92);
}
.course-foot:hover{
  background: rgba(255,255,255,.10);
  color:#fff;
}

/* =========================================================
   RESPONSIVE (minimal, only when needed)
   ========================================================= */
@media (max-width: 992px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-featured{ height: 380px; }
  .layout-wrapper{ grid-template-columns: 1fr; }
  .course-widget{ position: relative; top:auto; }
  .alerts-row{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .container{ padding: 0 16px; }
  .hero-featured{ height: 340px; }
  .sidebar-card,
  .mini-card{
    grid-template-columns: 115px 1fr;
  }
  .sidebar-thumb,
  .mini-thumb{
    width: 115px;
    height: auto;
  }
  .widget-featured img{ height: 175px; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{
    transition:none !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }
}

/* =========================================================
   RESOURCE CARDS
   ========================================================= */
.resources-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-top: 30px;
  border: 1px solid var(--border);
  border-radius: var(--r20);
  padding: 10px;
}

.resources-cards h2 {
  text-align: center;
  color: #666666;
  display: flex;
  justify-content: center;
}
.resource-card{
  display: block;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r16);
  box-shadow: var(--shadow-1);
  padding: 18px;
}

.resource-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: rgba(37,99,235,.22);
}

.resource-card h3{
  margin: 0 0 8px;
  font-size: var(--fs-lg);
  line-height: 1.25;
  font-weight: 700;
  color: var(--text);
}

.resource-card p{
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--muted);
}