/* ============================================================
   GPSMMAKARANTA SCHOOL LAYOUT — Fully Responsive
   Breakpoints: 
     Desktop  : > 1024px  (3-column grid)
     Tablet   : 769–1024px (2-column: main + right, left below)
     Mobile   : ≤ 768px   (single column stacked)
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.gpsmmakaranta-school-layout-wrapper {
  background: #f2f2f2;
  font-family: sans-serif;
  padding: 20px;
}

.gpsmmakaranta-school-layout-wrapper *,
.gpsmmakaranta-school-layout-wrapper *::before,
.gpsmmakaranta-school-layout-wrapper *::after {
  box-sizing: border-box;
}

/* ── Grid Layout ─────────────────────────────────────────── */
.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 300px;
  grid-template-areas: "left main right";
  gap: 20px;
  align-items: start;
}

.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-left-sidebar  { grid-area: left; }
.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-main-content  { grid-area: main; }
.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-right-sidebar { grid-area: right; }

/* ── Sidebars (Desktop — sticky) ─────────────────────────── */
.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-left-sidebar,
.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-right-sidebar {
  background: #f5f5f5;
  border-radius: 0px;
  border-left: 1px solid #000;
  padding: 20px;

  position: sticky;
  top: 90px;
  align-self: start;

  max-height: calc(100vh - 110px);
  overflow-y: auto;

  overscroll-behavior: contain;
  scroll-behavior: smooth;

  overflow-wrap: break-word;
}

/* ── Main Content ─────────────────────────────────────────── */
.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-main-content {
  padding: 0;
  margin: 0;
  border-radius: 12px;
  min-width: 0;
}

/* ── Sidebar media constraints ───────────────────────────── */
.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-left-sidebar img,
.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-right-sidebar img,
.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-left-sidebar iframe,
.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-right-sidebar iframe,
.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-left-sidebar video,
.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-right-sidebar video {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-left-sidebar *,
.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-right-sidebar * {
  max-width: 100%;
}

/* ── Scrollbar ───────────────────────────────────────────── */
.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-left-sidebar::-webkit-scrollbar,
.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-right-sidebar::-webkit-scrollbar {
  width: 6px;
}

.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-left-sidebar::-webkit-scrollbar-thumb,
.gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-right-sidebar::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 19px;
}

/* ============================================================
   TAB SWITCHER
   ============================================================ */
.gpsmswitcho-tab-container {
  width: 100%;
  border-radius: 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.gpsmswitcho-tabs {
  display: flex;
  flex-wrap: wrap; /* tabs wrap on very small screens */
}

.gpsmswitcho-tab {
  flex: 1;
  min-width: 80px; /* prevents tabs squashing too narrow */
  padding: 20px;
  text-align: center;
  cursor: pointer;
  background: #111827;
  color: #fff;
  transition: background 0.3s;
  user-select: none;
  font-size: 1.2em;
}

.gpsmswitcho-tab.gpsmswitcho-active {
  background: #004225;
  color: white;
}

.gpsmswitcho-content {
  padding: 0;
  display: none;
  animation: gpsmswitcho-fade 0.2s ease-in;
}

.gpsmswitcho-content.gpsmswitcho-active {
  display: block;
}

@keyframes gpsmswitcho-fade {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ── Tablet: 769px – 1024px ──────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .gpsmmakaranta-school-layout-wrapper {
    padding: 16px;
  }

  .gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-layout {
    grid-template-columns: minmax(0, 1fr) 260px;
    grid-template-areas:
      "main  right"
      "left  left";
    gap: 16px;
  }

  /* Left sidebar becomes a full-width, non-sticky strip below */
  .gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-left-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    border-radius: 12px;
  }

  /* Right sidebar stays sticky on tablet */
  .gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-right-sidebar {
    top: 70px;
    max-height: calc(100vh - 90px);
  }

  /* Slightly smaller tab text on tablets */
  .gpsmswitcho-tab {
    padding: 16px 12px;
    font-size: 1.05em;
  }
}

/* ── Mobile: ≤ 768px ─────────────────────────────────────── */
@media (max-width: 768px) {
  .gpsmmakaranta-school-layout-wrapper {
    padding: 0;
  }

  .gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "right"
      "left";
    gap: 12px;
  }

  .gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-main-content {
    padding: 0;
  }

  /* Both sidebars become static, full-height blocks */
  .gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-left-sidebar,
  .gpsmmakaranta-school-layout-wrapper .gpsmmakaranta-right-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    border-radius: 8px;
  }

  /* Tab labels shrink gracefully */
  .gpsmswitcho-tab {
    padding: 14px 8px;
    font-size: 0.95em;
  }
}

/* ── Very small phones: ≤ 400px ──────────────────────────── */
@media (max-width: 400px) {
  .gpsmswitcho-tabs {
    flex-direction: column; /* stack tabs vertically if extremely narrow */
  }

  .gpsmswitcho-tab {
    font-size: 0.9em;
    padding: 12px;
  }
}