/* ════════════════════════════════════════════
   LAYOUT CONTROL PANEL
════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 1 — GLOBAL VARIABLES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --layout-max-width: 1200px;
  --layout-padding:   60px 40px 60px;

  --row1-height: 280px;
  --row2-height: 180px;
  --row3-height: 180px;

  --hero-width:    1fr;
  --weather-width: 330px;

  --projects-card-height: auto;
  --about-card-height:    auto;
  --stack-card-height:    auto;
  --status-card-height:   auto;
  --contact-card-height:  auto;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 2 — BASE BODY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body {
  max-width: var(--layout-max-width);
  padding:   var(--layout-padding);
  margin: 0 auto;
  box-sizing: border-box;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 3 — DESKTOP SCROLL LOCK
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1281px) {
  html.home-page { overflow: hidden; }
  body.home-page  { height: 100%; overflow: hidden; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 4 — HOME GRID (Desktop default)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.grid-wrap {
  flex: 1;
  display: grid;
  grid-template-rows: var(--row1-height) var(--row2-height) var(--row3-height);
  gap: 10px;
  min-height: 0;
}

.row1 {
  display: grid;
  grid-template-columns: var(--hero-width) var(--weather-width);
  gap: 10px;
  min-height: 0;
}

/* Projects 2fr, About Me 1fr */
.row2 {
  display: grid;
  grid-template-columns: 2fr 1.3fr;
  gap: 10px;
}

/* Tech Stack, Status, Contact — 3 equal columns */
.row3 {
  display: grid;
  grid-template-columns: 1.7fr 1.45fr 2.08fr;
  gap: 10px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION 5 — CARD SIZE CONTROLS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.card-weather {
  width: var(--weather-width);
  min-height: 0;
  overflow: hidden;
  flex-shrink: 0;
}

.card-hero {
  min-height: 0;
  overflow: hidden;
}

.projects-grid .card { min-height: var(--projects-card-height); }
.about-layout        { min-height: var(--about-card-height); }
.stack-cat           { min-height: var(--stack-card-height); }
.stat-block          { min-height: var(--status-card-height); }
.contact-form-wrap   { min-height: var(--contact-card-height); }


/* ════════════════════════════════════════════
   MEDIA QUERIES
════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BREAKPOINT — 1280px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1280px) {
  html.home-page { overflow-y: auto; height: auto; }
  body.home-page  { overflow-y: auto; height: auto; }

  :root {
    --row1-height:   270px;
    --weather-width: 280px;
  }
  .card-weather { width: var(--weather-width); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BREAKPOINT — 769px to 1024px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 769px) and (max-width: 1024px) {
  html.home-page,
  body.home-page { height: auto; overflow-y: auto; }

  body { padding: 16px 24px; }

  .grid-wrap {
    display: flex;
    flex-direction: column;
    flex: unset;
    gap: 10px;
  }

  .row1 {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 10px;
    height: 280px;
  }

  .row2 {
    display: grid;
    grid-template-columns: 2fr 1.4fr;
    gap: 10px;
    height: 200px;
  }

  .row3 {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 1.4fr;
    gap: 10px;
    height: 140px;
  }

  .card-weather { width:300px; }
  .card-hero    { width: 100%; min-height: 0; overflow: hidden; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BREAKPOINT — 768px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
  html.home-page,
  body.home-page { height: auto; overflow-y: auto; }

  :root { --layout-padding: 12px 14px 10px; }

  .grid-wrap { display: flex; flex-direction: column; gap: 8px; }
  .row1      { display: flex; flex-direction: column; gap: 8px; }
  .row2      { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .row3      { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

  .card-hero    { width: 100%; }
  .card-weather { width: 100%; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BREAKPOINT — 480px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 480px) {
  :root { --layout-padding: 10px 11px 8px; }
  .row2 { grid-template-columns: 1fr 1fr; gap: 7px; }
  .row3 { grid-template-columns: 1fr 1fr; gap: 7px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BREAKPOINT — 360px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 360px) {
  .row2 { grid-template-columns: 1fr; }
  .row3 { grid-template-columns: 1fr; }
}