/* =====================================================
   COMPACT, FULL RECTANGLE HOMEPAGE
===================================================== */

html,
body {
  min-height: 100%;
}

body.home-page {
  margin: 0 !important;
  padding: 14px 0 22px !important;

  background:
    url("/images/patterns/blue-gingham.jpg")
    center top / 150px auto repeat !important;
}

/* Main framed rectangle */
body.home-page .retro-home {
  width: min(1180px, calc(100vw - 54px)) !important;
  max-width: 1180px !important;

  margin: 0 auto !important;
  padding: 8px !important;

  background:
    url("/images/patterns/pink-stars.jpg")
    center / 190px auto repeat !important;

  border: 2px solid #69bce1 !important;
  outline: 3px solid #f09bbc !important;
  outline-offset: 3px !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Banner remains full width */
body.home-page .retro-banner {
  width: 100% !important;
  margin: 0 0 8px !important;
}

/* Tighter three-column structure */
body.home-page .retro-grid {
  display: grid !important;

  grid-template-columns:
    190px
    minmax(0, 1fr)
    225px !important;

  gap: 8px !important;
  align-items: start !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}

/* Every column occupies its assigned space */
body.home-page .retro-left,
body.home-page .retro-center,
body.home-page .retro-right {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  align-self: start !important;
  box-sizing: border-box !important;
}

/* Remove large inherited spacing */
body.home-page .retro-column {
  gap: 0 !important;
}

body.home-page .retro-column > section,
body.home-page .retro-column > article {
  width: 100% !important;
  max-width: none !important;

  margin: 0 0 8px !important;
  box-sizing: border-box !important;
}

body.home-page .retro-column > section:last-child,
body.home-page .retro-column > article:last-child {
  margin-bottom: 0 !important;
}

/* Center boxes must stretch across the full center column */
body.home-page .retro-center > *,
body.home-page .photo-panel,
body.home-page .special-panel {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Upper photo panel becomes a compact full-width rectangle */
body.home-page .photo-panel {
  padding: 0 !important;
  overflow: hidden !important;
}

body.home-page .photo-panel .main-photo-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  width: 100% !important;
  max-width: none !important;

  gap: 8px !important;
  padding: 8px !important;
  margin: 0 !important;

  box-sizing: border-box !important;
}

body.home-page .photo-panel .main-photo-grid > * {
  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.home-page .photo-panel .main-photo-grid img {
  display: block !important;

  width: 100% !important;
  height: 350px !important;
  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;

  object-fit: cover !important;
  object-position: center 38% !important;

  box-sizing: border-box !important;
}

/* Compact special-pages row */
body.home-page .special-panel {
  padding: 0 !important;
}

body.home-page .special-page-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  width: 100% !important;

  gap: 6px !important;
  padding: 7px !important;
  margin: 0 !important;

  box-sizing: border-box !important;
}

body.home-page .special-page-card {
  min-height: 105px !important;
  height: 105px !important;

  margin: 0 !important;
  padding: 8px !important;

  box-sizing: border-box !important;
}

/* Left side stays compact */
body.home-page .profile-panel,
body.home-page .nav-panel,
body.home-page .food-panel,
body.home-page .boba-side-panel {
  width: 100% !important;
}

body.home-page .profile-photo {
  width: 92px !important;
  height: 92px !important;
}

/* Food cards remain vertical and readable */
body.home-page .food-panel .food-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;

  gap: 6px !important;
  padding: 7px !important;
}

body.home-page .food-card {
  min-height: 88px !important;
  height: auto !important;

  margin: 0 !important;
  padding: 8px !important;
}

/* Right column is compact */
body.home-page .trip-panel,
body.home-page .world-cup-panel,
body.home-page .time-panel,
body.home-page .calendar-panel,
body.home-page .boba-right-panel {
  width: 100% !important;
  max-width: none !important;
}

body.home-page .trip-list {
  padding: 7px !important;
}

body.home-page .trip-row {
  min-height: 68px !important;
  margin-bottom: 5px !important;
  padding: 6px !important;
}

body.home-page .trip-row:last-child {
  margin-bottom: 0 !important;
}

/* Right-side photos */
body.home-page .boba-right-panel img,
body.home-page .locked-boba-photo,
body.home-page .stable-boba-photo {
  display: block !important;

  width: calc(100% - 12px) !important;
  height: 180px !important;

  margin: 6px !important;

  object-fit: cover !important;
  object-position: center 42% !important;

  box-sizing: border-box !important;
}

/* Remove the deleted center section if stale HTML survives */
body.home-page .update-panel,
body.home-page .static-us-lately,
body.home-page .locked-us-lately,
body.home-page .photo-center-final,
body.home-page .center-photos-stable,
body.home-page .us-lately-fixed,
body.home-page .us-lately-repaired {
  display: none !important;
}

/* Make borders thinner and more Neocities-like */
body.home-page .retro-box,
body.home-page .retro-title,
body.home-page .special-page-card,
body.home-page .trip-row,
body.home-page .food-card {
  border-width: 1px !important;
  box-shadow: none !important;
}

/* Reduce title-bar height */
body.home-page .retro-title {
  min-height: 25px !important;
  height: auto !important;

  padding: 4px 6px !important;

  line-height: 1.05 !important;
  box-sizing: border-box !important;
}

/* Mobile fallback */
@media (max-width: 900px) {
  body.home-page .retro-home {
    width: calc(100vw - 20px) !important;
  }

  body.home-page .retro-grid {
    grid-template-columns: 1fr !important;
  }

  body.home-page .retro-left,
  body.home-page .retro-center,
  body.home-page .retro-right {
    width: 100% !important;
  }
}