/* =================================================================
   SNOWLEOPARD Studio & Research — tablet.css
   Tablet layer, loaded for landscape tablets:
   • 601–1024px wide and taller than 500px
   • 1025–1366px wide with a coarse pointer (iPad Pro class)
   Tablets in portrait use the phone layer (mobile.css) instead.
   ================================================================= */

/* ----- Foundation -------------------------------------------------- */
@media (min-width: 601px) and (orientation: landscape) and (min-height: 501px),
  (min-width: 1001px) and (orientation: landscape),
  (min-width: 1025px) and (hover: hover),
  (min-width: 1367px) {
  :root {
    /* Fluid gutter sized for the tablet canvas. */
    --edge: clamp(2rem, 4.25vw, 3.5rem);
    --margin-col: clamp(150px, 18vw, 210px);
    --spine-gap: clamp(2.5rem, 5vw, 4rem);
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip;
  }
  body {
    min-width: 0;
    overflow-x: clip;
  }

  /* Lets grid and flex children shrink below their content width. */
  main,
  section,
  article,
  header,
  footer,
  nav,
  div,
  figure,
  form,
  .site-nav,
  .hero-inner,
  .pf-wrap,
  .rp-wrap,
  .about-sec,
  .fn-grid,
  .footer-inner,
  .dl-inner {
    min-width: 0;
  }

  img,
  video,
  svg {
    max-width: 100%;
  }
  input,
  textarea {
    font-size: 16px;
  }
  button,
  .btn-pill,
  .menu a,
  input,
  textarea {
    min-height: 44px;
  }

  /* Header: proportional mark and touch-sized hit areas. */
  .site-nav {
    padding: 1.05rem var(--edge);
    padding-left: max(var(--edge), env(safe-area-inset-left));
    padding-right: max(var(--edge), env(safe-area-inset-right));
  }
  .brand-lockup {
    height: clamp(48px, 5vw, 56px);
  }
  .menu {
    gap: clamp(0.9rem, 1.8vw, 1.35rem);
  }
  .menu a {
    font-size: clamp(0.88rem, 1.35vw, 1rem);
  }
  .menu a.btn-pill {
    min-height: 44px;
    padding-inline: 1.35rem;
  }

  h1,
  h2 {
    text-wrap: balance;
  }
  p {
    text-wrap: pretty;
  }

  /* Field Notes band: two columns where the width allows. */
  .fn-grid {
    gap: clamp(2rem, 4vw, 3rem);
  }
  .fn-left,
  .fn-right {
    min-width: 0;
  }
  .fn-form {
    max-width: 520px;
  }

  /* Footer marks sit between the desktop and phone sizes. */
  .funders,
  .memberships {
    gap: 1.15rem;
    flex-wrap: wrap;
  }
  .funders li {
    height: 54px;
  }
  .funders img,
  .memberships img {
    max-height: 40px;
  }
  .funders li:nth-child(2) img {
    max-height: 46px;
  }
  .memberships li {
    height: 60px;
  }
  .memberships li:first-child img {
    max-height: 60px;
  }

  /* Form fields keep a readable width on touch screens. */
  .contact-form,
  .fn-form,
  .fn-subscribe,
  .dl-form {
    min-width: 0;
  }
}

/* ----- Compact landscape tablets: 601–900px ----------------------- */
@media (min-width: 601px) and (max-width: 900px) and (orientation: landscape) and (min-height: 501px) {
  :root {
    --edge: clamp(2rem, 5.2vw, 3rem);
  }

  .site-nav {
    padding-top: 0.95rem;
    padding-bottom: 0.95rem;
  }

  .hero-inner {
    padding-left: var(--edge);
    padding-right: var(--edge);
    transform: translateY(24px);
  }

  .fn-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .fn-member {
    padding-top: 1.75rem;
  }
  .fn-form {
    max-width: 560px;
  }

  /* Homepage: tablet measure for the stacked sections. */
  .t-grid,
  .sv-grid {
    max-width: 560px;
  }
  .rc-copy {
    padding: 3.75rem var(--edge) 4.25rem;
  }
  .belief-inner {
    padding: 3.4rem var(--edge);
  }
  .belief-media {
    max-height: 500px;
  }

  /* Long-form articles: a wider reading measure than on a phone. */
  .es-article {
    padding-inline: max(var(--edge), calc((100% - 68ch) / 2));
  }
  .es-hero-inner {
    padding-left: var(--edge);
    padding-right: var(--edge);
  }

  /* Workbook cover keeps its presence on the download page. */
  .dl-cover a {
    max-width: 390px;
  }

  /* Footer: intermediate grid between desktop and phone. */
  .footer-inner {
    column-gap: 2rem;
    row-gap: 2.5rem;
  }
}

/* Navigation overlay for 801–900px touch tablets. A desktop window at
   the same width keeps the horizontal bar. */
@media (min-width: 801px) and (max-width: 900px) and (orientation: landscape) and (min-height: 501px) {
  .navicon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 44px;
    height: 44px;
    padding: 11px 8px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .navicon span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--museum-black);
    border-radius: 2px;
    transition:
      transform 0.25s ease,
      opacity 0.25s ease;
  }
  .navicon.open span:first-of-type {
    transform: translateY(9.5px) rotate(45deg) scaleX(1.16);
  }
  .navicon.open span:nth-of-type(2) {
    opacity: 0;
  }
  .navicon.open span:last-of-type {
    transform: translateY(-9.5px) rotate(-45deg) scaleX(1.16);
  }
  .brand,
  .navicon {
    position: relative;
    z-index: 2;
  }

  .menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
    background: var(--bone);
    padding: 6.5rem max(2rem, env(safe-area-inset-right)) 3rem
      max(2rem, env(safe-area-inset-left));
    overflow-y: auto;
  }
  .menu.open {
    display: flex;
  }
  body.menu-open {
    overflow: hidden;
  }
  .menu > li {
    width: 100%;
  }
  .menu a {
    display: block;
    width: 100%;
    padding: 0.85rem 0;
    font-size: 1.45rem;
    text-align: center;
  }
  .menu a::after {
    display: none;
  }
  .menu a.btn-contact {
    display: inline-flex;
    width: auto;
    min-height: 52px;
    margin-top: 1rem;
    padding: 0.75rem 2.35rem;
    font-size: 1rem;
  }
}

/* ----- Landscape tablets: 901–1024px ------------------------------ */
@media (min-width: 901px) and (max-width: 1024px) and (orientation: landscape) and (min-height: 501px),
  (min-width: 1001px) and (max-width: 1024px) and (orientation: landscape) {
  :root {
    --edge: clamp(2.5rem, 4.2vw, 3.25rem);
  }

  .menu {
    gap: 1rem;
  }
  .menu a {
    font-size: 0.9rem;
  }
  .brand-lockup {
    max-width: 225px;
  }

  .fn-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .cs-grid {
    gap: clamp(2.25rem, 4vw, 3rem);
  }
  .cs-heading {
    font-size: clamp(1.85rem, 3vw, 2.15rem);
  }
  .issue-headline {
    font-size: 1.25rem;
  }
}

/* ----- Large touch tablets: 1025–1366px --------------------------- */
@media (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  :root {
    --edge: clamp(3rem, 4.4vw, 4rem);
    --spine-gap: clamp(3.5rem, 4.8vw, 4.75rem);
    --margin-col: clamp(190px, 17vw, 220px);
  }

  .site-nav {
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
  }
  .brand-lockup {
    height: 56px;
  }
  .menu {
    gap: clamp(1.1rem, 1.8vw, 1.65rem);
  }
  .menu a {
    font-size: clamp(0.92rem, 1.15vw, 1.02rem);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Caps line lengths on the wider canvas. */
  .hero-inner,
  .sv-inner,
  .wb-inner,
  .footer-inner {
    max-width: 1180px;
  }

  .fn-grid {
    gap: 3rem;
  }
  .cs-grid {
    gap: 3rem;
  }

  /* No hover lift on touch, where hover states persist after a tap. */
  .btn-pill:hover,
  .brand:hover,
  .dl-cover a:hover {
    transform: none;
  }
}

/* ----- Landscape tablets: shared refinements ---------------------- */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: landscape) and (min-height: 501px),
  (min-width: 1001px) and (max-width: 1024px) and (orientation: landscape) {
  .hero {
    min-height: calc(100svh - 80px);
  }
  .site-nav {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }

  /* Tighter vertical rhythm for the shorter landscape screen. */
  .field-notes {
    padding-top: 2.75rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .hero {
    min-height: calc(100svh - 86px);
  }
}