/* ==========================================================================
   tablet-layouts.css — Phase 3d / Phase 4 of docs/RESPONSIVE_APP_UI_PLAN.md
   Making 768-1199px read as a tablet app rather than a stretched phone.

   The plan called for two-pane list/detail layouts here. Measuring the actual
   markup changed that decision for most surfaces:

     - The course archive renders a flat .tutor-course-list grid and the Q&A
       list a flat list of items. Neither has list/detail markup, and neither
       has a "detail" to show beside the list - the detail is a separate page.
       Faking two panes would mean loading course pages into an iframe or
       rebuilding both surfaces around AJAX, which is a far larger change than
       this phase justifies and would break deep links and the back button.

     - What actually made them read as stretched phones was grid density.
       Measured before this file: at 768px the course grid put ONE 584px card
       per row; it only reached two columns at 834px. A single giant card per
       row is the definition of a stretched phone layout.

   So tablet gets genuine multi-column layouts at the right densities, plus
   two-pane where the markup genuinely has a sidebar to work with (the Tutor
   dashboard and the single-course page). That delivers the tablet-app feel
   the plan was after, without rebuilding two surfaces around AJAX.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Course archive - density
   768px must not show one card per row. Two columns from 768, three from
   1024, which matches how the rail leaves ~700-950px of usable width.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .tutor-course-list.tutor-grid,
  .tutor-course-list.tutor-grid-3,
  .tutor-course-list.tutor-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--sp-5);
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .tutor-course-list.tutor-grid,
  .tutor-course-list.tutor-grid-3,
  .tutor-course-list.tutor-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--sp-5);
  }
}

/* Cards in a grid track must be allowed to shrink to it. */
@media (min-width: 768px) and (max-width: 1199px) {
  .tutor-course-list > *,
  .tutor-course-list .tutor-col-12 {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    flex: none;
  }
}

/* --------------------------------------------------------------------------
   2. Q&A - two-pane where it is genuinely available
   The questions list and the sidebar (categories/tags) are separate blocks in
   the markup, so on tablet they can sit side by side instead of the sidebar
   being pushed a full screen below the list.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .em-qa-layout,
  .em-qa-wrap:has(> .em-qa-side) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
    gap: var(--sp-6);
    align-items: start;
  }

  .em-qa-layout > *,
  .em-qa-wrap > * {
    min-width: 0;
  }

  /* The sidebar sticks while the list scrolls - a small thing that reads as
     app-like rather than page-like. */
  .em-qa-side {
    position: sticky;
    top: 96px;
  }

  /* Category cards get real density instead of one enormous card per row. */
  .em-qa-catgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .em-qa-catgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   3. Single course - sidebar beside content
   The Tutor single-course template has a real content/sidebar split, so this
   is the one surface where a true two-pane layout is already available.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .tutor-course-details-page > .tutor-row,
  .tutor-course-single-content-wrapper > .tutor-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: var(--sp-6);
    align-items: start;
  }

  .tutor-course-details-page > .tutor-row > *,
  .tutor-course-single-content-wrapper > .tutor-row > * {
    min-width: 0;
    max-width: 100%;
    flex: none;
    width: 100%;
  }

  /* The enrol/price card follows the reader down the page. */
  .tutor-course-sidebar,
  .tutor-course-details-widget {
    position: sticky;
    top: 96px;
  }
}

/* --------------------------------------------------------------------------
   4. Blog and generic card grids
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .hlist,
  .blog-grid,
  .home-card-grid,
  .hcard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  .hlist > *,
  .blog-grid > *,
  .home-card-grid > *,
  .hcard-grid > * {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   5. Reading measure
   A single column of prose spanning a full tablet width is hard to read.
   Cap the measure while leaving full-bleed sections alone.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .entry-content > p,
  .page-prose > p,
  .em-prose > p,
  .entry-content > ul,
  .entry-content > ol {
    max-width: 68ch;
  }
}

/* --------------------------------------------------------------------------
   6. Dashboard
   Tutor's dashboard has a real sidebar; on tablet it should stay beside the
   content rather than collapsing to a full-width stack.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) and (max-width: 1199px) {
  .tutor-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }

  .tutor-dashboard > * {
    min-width: 0;
  }
}