﻿/*
 * THOLCH Tablet CSS
 * Only place tablet-specific styles here. Tablet should generally behave closer to desktop.
 */
@media (min-width: 768px) and (max-width: 1024px) {
/* Shared tablet grid rules from the old >=700px breakpoint. */
  .tholch-quick-path-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tholch-quick-path-card {
      grid-template-rows: auto 1fr auto;
    }

    .location-map__heading {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
    }

    .location-filters {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: end;
    }

    .location-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .location-finder .location-card-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .tholch-beer-grid,
    .tholch-updates-grid,
    .out-there-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trade-card-grid,
    .trade-beer-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tholch-cookie-banner__content {
      grid-template-columns: minmax(0, 1fr);
    }

    .tholch-cookie-banner__actions {
      justify-content: flex-start;
    }

    .about-name-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .about-team-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-layout {
      grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(180px, 1fr));
    }

    .footer-brand {
      grid-column: auto;
    }

    .feature-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .feature-card {
      display: flex;
      flex-direction: column;
    }

    .feature-card__body {
      flex: 1;
    }

@media (min-width: 861px) {
  .header-inner {
      display: grid;
      grid-template-columns: minmax(180px, 0.38fr) minmax(0, 1fr);
      column-gap: clamp(1.5rem, 4vw, 4rem);
    }

    .site-branding {
      justify-content: center;
    }

    .site-branding__text {
      max-width: 220px;
    }

    .site-branding .custom-logo-link {
      max-width: 210px;
    }

    .site-branding .custom-logo {
      max-height: 58px;
    }

    .location-hero__inner {
      grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
      align-items: end;
    }

    .location-finder {
      grid-template-columns: minmax(320px, 0.86fr) minmax(420px, 1.14fr);
      grid-template-areas:
        "panel map";
      align-items: stretch;
    }

    .location-finder__panel {
      grid-area: panel;
      grid-template-rows: auto minmax(0, 1fr);
      height: 100%;
      max-height: none;
      overflow: hidden;
    }

    .location-finder__map {
      position: sticky;
      top: calc(var(--tholch-header-height, 76px) + 1rem);
      grid-area: map;
    }

    .location-map-panel .location-map__heading h2 {
      font-size: 3.2rem;
    }

    .tholch-location-results {
      min-width: 0;
      min-height: 0;
      grid-template-rows: auto minmax(0, 1fr) auto auto;
    }

    .location-finder .location-card-grid {
      max-height: none;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-color: rgba(141, 75, 34, 0.55) rgba(31, 27, 23, 0.08);
      scrollbar-width: thin;
    }

    .location-filters {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .location-filter-reset {
      width: 100%;
    }

    .location-card-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .single-beer-hero__inner {
      padding-top: 4rem;
      padding-bottom: 4rem;
    }

    .single-beer-cta__inner {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .out-there-section__heading {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .single-out-there-hero__inner,
    .single-out-there-layout {
      grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    }

    .tholch-beer-card {
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }

    .tholch-beer-card:hover,
    .tholch-beer-card:focus-within {
      border-color: rgba(197, 139, 44, 0.46);
      box-shadow: 0 24px 56px rgba(31, 27, 23, 0.16);
      transform: translateY(-4px);
    }

    .tholch-update-card {
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }

    .tholch-update-card:hover,
    .tholch-update-card:focus-within {
      border-color: rgba(197, 139, 44, 0.46);
      box-shadow: 0 24px 56px rgba(31, 27, 23, 0.16);
      transform: translateY(-4px);
    }

    .single-update-layout {
      grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    }

    .single-update-media-layout.layout-image-left-content-right,
    .single-update-media-layout.layout-content-left-image-right {
      grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
    }

    .single-update-media-layout.layout-image-left-content-right .single-update-featured {
      order: 0;
    }

    .single-update-media-layout.layout-content-left-image-right .single-update-featured {
      order: 2;
    }

    .trade-hero__inner,
    .trade-intro__grid,
    .trade-support-grid,
    .trade-keg-coolbox,
    .trade-contact-cta__inner {
      grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    }

    .kegs-hero__inner,
    .kegs-split,
    .kegs-know {
      grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    }

    .kegs-step-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .about-split,
    .about-founders,
    .about-cta__inner {
      grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
      align-items: center;
    }

    .contact-hero__inner,
    .contact-form-grid,
    .contact-social-grid,
    .contact-trade-cta__inner {
      grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
      align-items: center;
    }

    .contact-card-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .contact-trade-cta__inner {
      align-items: end;
    }

    .contact-trade-cta .button-row {
      justify-content: flex-end;
    }

    .legal-layout {
      grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
    }

    .legal-hero h1 {
      font-size: 8rem;
    }

    .legal-hero p {
      font-size: 1.28rem;
    }

    .legal-content h2 {
      font-size: 3.2rem;
    }

    .legal-nav {
      position: sticky;
      top: calc(var(--tholch-header-height, 76px) + 1rem);
    }

    .about-name-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .about-team-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .team-profile-layout {
      grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
    }

    .about-cta__inner {
      align-items: end;
    }

    .about-cta .button-row {
      justify-content: flex-end;
    }

    .button-row .button {
      flex: 0 1 auto;
    }

    .trade-hero__panel {
      justify-self: end;
    }

    .trade-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trade-beers-section .trade-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trade-beer-grid,
    .trade-steps-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .trade-beer-grid {
      max-width: 820px;
    }

    .trade-keg-coolbox__content,
    .trade-keg-coolbox__media {
      min-height: 460px;
    }

    .single-update-cta__inner,
    .updates-section__heading--split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 2rem;
      align-items: end;
    }

    .updates-section__heading--split {
      max-width: none;
    }

    .updates-section__heading--split .text-link {
      margin-bottom: 0.45rem;
    }

    .tholch-home-hero__inner {
      grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    }

    .tholch-home-hero__badge {
      justify-self: end;
    }

    .tholch-statement,
    .tholch-find-panel,
    .tholch-trade-panel,
    .tholch-social-panel,
    .tholch-split-heading {
      grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    }

    .tholch-social-panel {
      grid-template-columns: minmax(0, 460px) minmax(300px, 1fr);
      gap: clamp(2rem, 5vw, 3.25rem);
    }

    .tholch-social-panel h2 {
      font-size: clamp(2.35rem, 4.5vw, 3rem);
    }

    .tholch-social-title {
      max-width: 460px;
    }

    .tholch-social-panel__actions {
      justify-self: end;
    }

    .tholch-split-heading {
      align-items: end;
    }

    .tholch-split-heading .text-link {
      justify-self: end;
      margin-bottom: 0.45rem;
    }

    .tholch-story-panel--compact {
      grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.75fr);
    }

    .tholch-quick-path__heading h2 {
      font-size: 3.2rem;
    }

    .tholch-quick-path-card h3 {
      font-size: 2rem;
    }

    .tholch-story-photo,
    .tholch-story-photo-placeholder {
      min-height: 360px;
    }

    .tholch-beer-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tholch-updates-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tholch-contact-panel {
      text-align: center;
    }

    .tholch-contact-panel .button-row {
      justify-content: center;
    }

    .tholch-contact-panel p,
    .tholch-contact-panel h2 {
      margin-inline: auto;
    }

    .footer-layout {
      grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(180px, 1fr));
    }

    .footer-brand {
      grid-column: auto;
    }

    .main-navigation {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1 1 auto;
      min-width: 0;
    }

    .home-hero {
      min-height: calc(100svh - 84px);
    }

    .split-layout,
    .find-panel,
    .trade-grid,
    .social-panel {
      grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    }

    .contact-panel {
      text-align: center;
    }

    .contact-panel p,
    .contact-panel h2 {
      margin-inline: auto;
    }
  }

/* Tablet header/menu rules for cramped widths. */
  .header-inner {
      align-items: stretch;
      flex-direction: column;
      min-height: 72px;
      padding: 0.8rem 0;
      gap: 0;
    }

    .site-branding {
      justify-content: space-between;
      width: 100%;
    }

    .menu-toggle {
      display: inline-flex;
    }

    .main-navigation {
      display: grid;
      grid-template-rows: 0fr;
      flex: none;
      width: 100%;
      visibility: hidden;
      opacity: 0;
      transition: grid-template-rows 240ms ease, opacity 180ms ease, visibility 240ms ease;
    }

    .main-navigation > .primary-menu {
      overflow: hidden;
    }

    .main-navigation.is-open {
      grid-template-rows: 1fr;
      visibility: visible;
      opacity: 1;
    }

    .primary-menu,
    .primary-menu ul {
      display: grid;
      gap: 0;
      padding-top: 0.8rem;
    }

    .main-navigation > .primary-menu--desktop {
      display: none;
    }

    .main-navigation > .primary-menu--mobile {
      display: grid;
    }

    .primary-menu a {
      padding: 0.95rem 0;
      border-top: 1px solid rgba(255, 250, 242, 0.14);
      font-size: clamp(0.92rem, 2vw, 1.08rem);
      letter-spacing: 0.06em;
    }

@media (max-width: 860px) {
  body {
      --tholch-header-height: 72px;
    }

    body.admin-bar .site-header {
      top: 46px;
    }

    .header-inner,
    .footer-inner,
    .hero-grid {
      grid-template-columns: 1fr;
    }

    .header-inner {
      align-items: stretch;
      flex-direction: column;
    }

    .footer-inner,
    .hero-grid {
      align-items: stretch;
      flex-direction: column;
    }

    .header-inner {
      min-height: 72px;
      padding: 0.8rem 0;
      gap: 0;
    }

    .site-branding {
      justify-content: space-between;
      width: 100%;
    }

    .menu-toggle {
      display: inline-flex;
    }

    .main-navigation {
      display: grid;
      grid-template-rows: 0fr;
      width: 100%;
      visibility: hidden;
      opacity: 0;
      transition: grid-template-rows 240ms ease, opacity 180ms ease, visibility 240ms ease;
    }

    .main-navigation > .primary-menu {
      overflow: hidden;
    }

    .main-navigation.is-open {
      grid-template-rows: 1fr;
      visibility: visible;
      opacity: 1;
    }

    .primary-menu,
    .primary-menu ul {
      display: grid;
      gap: 0;
      padding-top: 0.8rem;
    }

    .main-navigation > .primary-menu--desktop {
      display: none;
    }

    .main-navigation > .primary-menu--mobile {
      display: grid;
    }

    .primary-menu a {
      padding: 0.95rem 0;
      border-top: 1px solid rgba(255, 250, 242, 0.14);
      font-size: clamp(0.92rem, 4vw, 1.15rem);
      letter-spacing: 0.06em;
    }

    .hero {
      min-height: auto;
    }

    .posts-grid {
      grid-template-columns: 1fr;
    }
  }

/* Tablet-specific <=1024px layout corrections. */
  .tholch-beer-grid,
    .out-there-grid,
    .trade-card-grid,
    .trade-beer-grid,
    .trade-steps-grid,
    .contact-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tholch-moments__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tholch-moments__heading h2 {
      font-size: clamp(3.6rem, 9vw, 6rem);
    }

    .location-finder {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "map"
        "panel";
    }

    .location-finder__panel {
      grid-area: panel;
      max-height: none;
    }

    .location-finder__map {
      grid-area: map;
    }

    .location-finder__panel,
    .location-finder__map,
    .tholch-location-results {
      min-width: 0;
    }

    .location-finder__map {
      position: static;
    }

    .location-finder .location-card-grid {
      max-height: none;
      overflow: visible;
      padding-right: 0;
    }

    /* Tablet keeps shared beer images but uses a shorter frame than desktop. */
    .tholch-beer-card__media {
      height: clamp(340px, 46vw, 460px);
    }

    .location-map-panel .location-map {
      order: 1;
      height: clamp(300px, 52vh, 520px);
      min-height: 300px;
    }

    .location-map-panel .location-map__heading {
      order: 2;
    }

    .single-beer-hero__inner,
    .single-beer-details.has-details-product .single-beer-details__grid,
    .single-beer-details.layout-content-left-image-right.has-details-product .single-beer-details__grid,
    .single-update-media-layout.layout-image-left-content-right,
    .single-update-media-layout.layout-content-left-image-right,
    .single-out-there-hero__inner,
    .single-out-there-layout,
    .trade-hero__inner,
    .trade-intro__grid,
    .trade-support-grid,
    .trade-keg-coolbox,
    .trade-contact-cta__inner,
    .contact-hero__inner,
    .contact-form-grid,
    .contact-social-grid,
    .contact-trade-cta__inner,
    .tholch-trade-panel,
    .tholch-find-panel,
    .tholch-social-panel,
    .tholch-split-heading,
    .tholch-story-panel--compact {
      grid-template-columns: minmax(0, 1fr);
    }

    .single-beer-details__product,
    .single-beer-details.layout-image-left-content-right .single-beer-details__product,
    .single-beer-details.layout-content-left-image-right .single-beer-details__product {
      justify-self: center;
      order: -1;
    }

    .single-beer-details__product img {
      width: min(100%, 280px);
    }

    .trade-hero__panel {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      width: 100%;
    }

    .trade-hero__panel span {
      min-width: 0;
    }

  @media (min-width: 900px) {
    .trade-keg-coolbox {
      grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
    }
  }
}

