/* ── Home page v4: the directory ───────────────────────────────────────────
   Owner, 2026-08-26: "we are complicating it too much, keep it simple. Write
   something like Resources for Mumbai University and all its affiliated
   colleges, then boxes of Notes, question paper and all things where the user
   can go."

   So this page is a signpost, not a funnel. One line saying what munotes is,
   then one box per section, each carrying its own live number so nothing is
   promised that is not there. The three-step stream/course/material wizard
   (homepage-v3.css, kept for rollback) is gone.

   Palette and type are the resource hub's own tokens, copied from
   resource-modern-shell.css, so the home page and the pages these boxes open
   are visibly the same site. Lora throughout: the sitewide serif reading
   system (project_serif_reading_system_2026_07_15). */

.mn-hd-body {
  --blue-900: #0b1d4e;
  --blue-800: #123178;
  --blue-600: #1d50ca;
  --blue-300: #93b4f8;
  --blue-100: #e8f0fe;
  --blue-50: #f0f5ff;
  --off: #f8f9fc;
  --ink: #0d1526;
  --ink-2: #2c3e5c;
  --ink-3: #5a718c;
  --border: #dce6f5;
  --f-display: 'Lora', Georgia, Cambria, serif;

  margin: 0;
  background: var(--off);
  color: var(--ink);
  font-family: var(--f-display);
  -webkit-font-smoothing: antialiased;
}

.mn-hd-body *,
.mn-hd-body *::before,
.mn-hd-body *::after { box-sizing: border-box; }

.mn-hd-body main a { color: inherit; text-decoration: none; }

.mn-hd-body a:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Masthead ──
   The same full-width navy band every hub page opens with, so the home page is
   not a different-looking front door to the same building. */
.mn-hd-hero {
  background: linear-gradient(140deg, var(--blue-900) 0%, var(--blue-800) 55%, #1e3a8a 100%);
  position: relative;
  overflow: hidden;
}

.mn-hd-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* One column for the whole page, matching the navbar's own box so the H1 starts
   on the exact x the wordmark does. */
.mn-hd-wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--mn-nav-gutter, 32px);
  position: relative;
  z-index: 1;
}

.mn-hd-hero .mn-hd-wrap { padding-block: 46px 44px; }

/* ⛔ NO max-width (owner, 2026-08-26: "this can be in one line, why
   deliberately are you taking two lines"). It was capped at 34ch, which broke a
   line that fits: the H1 measures 1076px on one line at 38px and the content
   column gives it 1216px. The column is the only limit it needs now, so it runs
   on one line down to about 1140px of viewport and wraps by itself below that,
   balanced. */
.mn-hd-h1 {
  margin: 0;
  font-size: 38px;
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
}


/* ── The boxes ── */
/* The eyebrow above the grid is gone (owner, 2026-08-26: "remove this, it
   sounds childish"), so this padding is the only thing holding the first row of
   boxes off the navy band. */
.mn-hd-main { padding-block: 34px 8px; }


/* 300px, not 250px, so the desktop column count is THREE (2026-08-26).
   Nine boxes in a four-wide grid strand one card alone on a third row; three
   wide is a clean 3x3 and gives each card ~396px instead of ~293px, which pulls
   most sub-lines back from three lines to two.

   ⚠️ The track width is chosen from BOTH ends, and the gutter counts twice:
   content = min(viewport, 1280) - 2 x gutter. n columns fit while
   n*300 + (n-1)*14 <= content.
     4 columns would need 1242 and the content maxes out at 1216, so it is never 4.
     3 columns need 928, so three hold from a 992px viewport up, which covers
     1024 laptops. At 320px they broke to two there, with an orphan on row five. */
.mn-hd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.mn-hd-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 20px 18px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.mn-hd-card:hover {
  border-color: var(--blue-600);
  box-shadow: 0 6px 18px rgba(11, 29, 78, .09);
  transform: translateY(-1px);
}

.mn-hd-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Solid brand blue, not the pale wash it started as (owner, 2026-08-26: "can we
   make these squares blue, it will be better looking"). It is the SAME blue as
   the count and the arrow on every card, so the grid still carries one accent
   colour rather than three. Deliberately not the masthead navy: eight dark
   tiles running down a phone made the column read heavier than the band above
   it, which is the opposite of what a signpost page wants. */
.mn-hd-card-ic {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--blue-600);
  color: #fff;
}

.mn-hd-card-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}


/* The count is the promise, and since the sub-line went (owner, 2026-08-26:
   "is it necessary at all") it is also the only line of prose on a card. It sits
   at the foot of every box on the same baseline, so a student reads down the
   column and sees at a glance which sections are full and which are filling up.

   ⛔ The sub-line was DELETED, not hidden. It had been display:none on phones
   only, which is ordinary responsive design; hiding it at EVERY width would
   have left keyword text no visitor can ever see, and this domain is
   penalty-averse (project_jobs_compliance_guard). */
.mn-hd-card-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
}

/* Never let the number wrap away from its unit: "13 / courses" over two lines
   reads as two separate figures. */
.mn-hd-card-n {
  font-weight: 600;
  color: var(--blue-600);
  white-space: nowrap;
}


.mn-hd-card-go {
  margin-left: auto;
  color: var(--blue-600);
  font-weight: 600;
}

/* ── The one card that leaves munotes.in ──
   Scholarships live on munotes.com, the owner's own second site. Ten boxes in a
   three-wide grid strand the tenth alone on a fourth row, reading as "and one
   more we forgot". Spanning it turns that accident into a statement: the 3x3 of
   munotes.in sections closes, and a single full-width band sends you off-site.

   ⚠️ Desktop only. On a phone the grid is two-up and ten tiles make five clean
   rows with no orphan to fix, so the tile stays a tile. Spanning it there would
   CREATE an orphan by pushing Events onto a row of its own. */
@media (min-width: 721px) {
  .mn-hd-card-wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
  }
  /* The sub-line used to be the flexible middle of this band; with it gone the
     title block takes the slack so the foot still sits hard right. */
  .mn-hd-card-wide .mn-hd-card-top { flex: 1 1 auto; }
  .mn-hd-card-wide .mn-hd-card-foot {
    margin-top: 0;
    padding-top: 0;
    flex: none;
    gap: 10px;
  }
}

/* ── The quiet line: everything else on munotes, without a box each ── */
.mn-hd-more {
  margin: 26px 0 0;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-3);
}

.mn-hd-more strong {
  color: var(--ink);
  font-weight: 600;
}

.mn-hd-more a {
  color: var(--blue-600);
  font-weight: 600;
  border-bottom: 1px solid rgba(29, 80, 202, .28);
}

.mn-hd-more a:hover { border-bottom-color: var(--blue-600); }

/* ── Upload strip ── */
.mn-hd-upload {
  margin: 26px 0 0;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--blue-100);
  border: 1px solid #c7d9fc;
  border-radius: 12px;
  padding: 20px 22px;
}

.mn-hd-upload-text { flex: 1 1 320px; min-width: 0; }

.mn-hd-upload h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mn-hd-upload p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.mn-hd-upload-btn {
  flex: none;
  background: var(--blue-600);
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 8px;
}

.mn-hd-upload-btn:hover { background: #1740a0; }

.mn-hd-note {
  margin: 22px 0 34px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* ── Phone ──
   The navbar drops its gutter to 16px at 640, and this page reads it from the
   same variable, so the H1 and the boxes keep tracking the wordmark. */
/* ── Phone: two tiles per row ──
   Owner, 2026-08-26: "in mobile I was thinking of giving 2 per row, that will
   look better". Mobile is 71% of clicks, so this is the layout most students
   actually get. A blue card was tried alongside it and rejected on sight.

   auto-fit cannot produce this on its own: two 300px tracks need 612px of
   content and a 375px phone has 343, so it would fall to one column. The
   column count is stated outright here instead. */
@media (max-width: 720px) {
  .mn-hd-hero .mn-hd-wrap { padding-block: 30px 30px; }
  .mn-hd-h1 { font-size: 29px; }
  .mn-hd-main { padding-block: 26px 4px; }
  /* ⚠️ minmax(0, 1fr), NOT 1fr. A bare 1fr track keeps min-width:auto, so it
     refuses to shrink below its content's min-content width; the nowrap count
     below ("822 colleges supported") held every tile at 175px and a 320px phone
     scrolled sideways at 372px. */
  .mn-hd-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .mn-hd-card { padding: 14px 13px 12px; }

  /* Icon on its own line. Inline it steals ~44px of a ~165px tile, which wraps
     "Question papers" and "Solved papers" while leaving "Notes" on one line,
     and the row goes ragged. */
  .mn-hd-card-top { flex-direction: column; align-items: flex-start; gap: 9px; }
  .mn-hd-card-title { font-size: 16px; line-height: 1.22; }

  /* One line in the foot now that the grey scope is gone (owner, 2026-08-26),
     so it no longer needs to stack. The arrow is aria-hidden decoration and the
     whole tile is the link, so it still goes. */
  .mn-hd-card-foot {
    padding-top: 11px;
    font-size: 13px;
  }
  .mn-hd-card-go { display: none; }

  /* ⚠️ Release the nowrap here. It exists so "13 courses" never splits across
     two lines while sharing a row with the scope; in the stacked foot the count
     owns the full tile width, so a short count cannot split anyway, and a long
     one ("List your college's event") needs to wrap rather than push the tile
     wider than the screen. */
  .mn-hd-card-n { white-space: normal; }

  .mn-hd-upload { padding: 18px; }
}

@media (max-width: 380px) {
  .mn-hd-h1 { font-size: 26px; }
}