﻿/*
 * THOLCH Mobile CSS
 * Only place mobile-specific styles here. Do not edit desktop or tablet behavior in this file.
 */
@media (max-width: 767px) {
/* Former <=860px shared mobile navigation rules. */
  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;
    }

@media (max-width: 420px) {
  .single-beer-details.has-details-product .single-beer-details__grid {
      grid-template-columns: minmax(92px, 0.42fr) minmax(0, 1fr);
      gap: 1rem;
    }

    .single-beer-details.layout-content-left-image-right.has-details-product .single-beer-details__grid {
      grid-template-columns: minmax(0, 1fr) minmax(92px, 0.42fr);
    }

    .single-beer-details.layout-image-top-content-bottom.has-details-product .single-beer-details__grid,
    .single-beer-details.layout-content-top-image-bottom.has-details-product .single-beer-details__grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .single-beer-copy h2 {
      font-size: clamp(1.35rem, 8vw, 2rem);
    }
  }

/* Former <=1024px rules that also affect mobile. */
  .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));
    }

    .location-finder {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "map"
        "panel";
    }

    .location-finder__panel {
      grid-area: panel;
    }

    .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;
    }

    .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-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);
    }

    .contact-page .contact-social-section {
      display: none;
    }

    .tholch-social-panel {
      align-items: start;
      gap: 1.6rem;
    }

    .tholch-social-panel h2 {
      font-size: clamp(1.75rem, 8.4vw, 2.45rem);
      line-height: 0.98;
    }

    .tholch-social-panel__actions {
      gap: 1rem;
    }

    .tholch-social-cta-row {
      width: 100%;
    }

    .tholch-social-cta-row .button {
      flex: 1 1 100%;
      width: 100%;
      justify-content: center;
    }

    .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,
    .single-beer-details.layout-image-top-content-bottom .single-beer-details__product,
    .single-beer-details.layout-content-top-image-bottom .single-beer-details__product {
      grid-column: 1;
      grid-row: auto;
      justify-self: center;
      order: -1;
    }

    .single-beer-details__content,
    .single-beer-details.layout-image-left-content-right .single-beer-details__content,
    .single-beer-details.layout-content-left-image-right .single-beer-details__content,
    .single-beer-details.layout-image-top-content-bottom .single-beer-details__content,
    .single-beer-details.layout-content-top-image-bottom .single-beer-details__content {
      grid-column: 1;
      grid-row: auto;
    }

    .single-beer-details__product img {
      width: min(100%, 320px);
    }

    .trade-hero__panel {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      width: 100%;
    }

    .trade-hero__panel span {
      min-width: 0;
    }

    .trade-keg-coolbox {
      gap: 1rem;
    }

    .trade-keg-coolbox__content {
      padding: 1rem;
    }

    .trade-keg-coolbox__badge {
      font-size: 0.68rem;
    }

    .trade-keg-coolbox__benefits li {
      font-size: 0.95rem;
    }

    .trade-keg-coolbox__media img,
    .trade-keg-coolbox__placeholder {
      min-height: 240px;
    }

    .mobile-sentence-line {
      display: block;
    }

/* Mobile-specific <=767px rules. */
  .container {
      width: min(100% - 24px, var(--tholch-container));
    }

    .custom-logo {
      display: block;
      max-width: min(156px, calc(100vw - 92px));
      height: auto;
    }

    .site-branding .custom-logo-link {
      max-width: calc(100vw - 92px);
    }

    .site-branding .custom-logo {
      max-height: 46px;
    }

    .site-branding__text {
      max-width: calc(100vw - 94px);
    }

    .button,
    .wp-block-button__link,
    button[type="submit"],
    input[type="submit"] {
      min-height: 46px;
    }

    .button-row {
      width: 100%;
    }

    .button-row .button,
    .button-row .wp-block-button__link {
      flex: 1 1 100%;
      justify-content: center;
      width: 100%;
    }

    .front-page .section-action .button,
    .front-page .tholch-find-panel > div > .button {
      justify-content: center;
      width: 100%;
    }

    .home-hero h1,
    .tholch-home-hero h1,
    .beer-archive-hero h1,
    .single-beer-hero h1,
    .out-there-hero h1,
    .single-out-there-hero h1,
    .location-hero h1,
    .trade-hero h1,
    .contact-hero h1,
    .about-hero h1,
    .updates-hero h1,
    .single-update-hero h1,
    .legal-hero h1 {
      max-width: 100%;
      font-size: clamp(2.35rem, 11.8vw, 4.4rem);
      line-height: 0.9;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
      text-wrap: balance;
    }

    .tholch-quick-path-grid,
    .out-there-grid,
    .trade-card-grid,
    .trade-steps-grid,
    .contact-card-grid,
    .location-card-grid,
    .footer-layout {
      grid-template-columns: minmax(0, 1fr);
    }

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

    .about-team-section__heading {
      margin-bottom: 1rem;
    }

    .about-team-card__body {
      gap: 0.22rem;
      padding: 0.45rem;
    }

    .about-team-card__label {
      padding: 0.18rem 0.32rem;
      font-size: 0.54rem;
    }

    .about-team-card h3 {
      font-size: clamp(0.78rem, 3.8vw, 1rem);
      line-height: 0.98;
    }

    .about-team-card__role {
      font-size: clamp(0.62rem, 3vw, 0.78rem);
    }

    .about-team-card__line {
      display: none;
    }

    .about-team-card__story-link {
      margin-top: 0.18rem;
      font-size: 0.58rem;
      letter-spacing: 0.02em;
    }

    .team-profile-media {
      width: 100%;
    }

    .team-profile-actions .button {
      justify-content: center;
    }

    .tholch-beer-grid,
    .trade-beer-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.35rem;
    }

    /* Mobile-only bottle strip; beer images still come from the shared PHP template. */
    .tholch-beer-card .tholch-card__media {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 0;
      height: auto;
      aspect-ratio: 3 / 4;
      padding: 0.4rem 0.2rem;
    }

    .tholch-beer-card .tholch-beer-card__media img {
      width: auto;
      height: 82%;
      max-width: 90%;
      max-height: 82%;
      object-fit: contain;
      object-position: center center;
    }

    .tholch-beer-card {
      gap: 0;
    }

    .tholch-beer-card .tholch-card__placeholder {
      padding: 0.65rem;
      font-size: clamp(1rem, 8vw, 1.55rem);
      line-height: 0.92;
    }

    .tholch-beer-card .tholch-card__body {
      display: none;
    }

    .tholch-beer-card__name {
      font-size: clamp(0.92rem, 5vw, 1.1rem);
      line-height: 0.98;
    }

    .tholch-beer-card .tholch-card__meta-row {
      min-height: 0;
      gap: 0.3rem;
      margin-bottom: 0;
    }

    .tholch-beer-card .tholch-card__meta-row span {
      min-height: 26px;
      padding: 0.2rem 0.45rem;
      font-size: 0.62rem;
      letter-spacing: 0.04em;
    }

    .tholch-beer-card .tholch-card__meta-row span:nth-child(n+3),
    .tholch-beer-card .tholch-card__body p {
      display: none;
    }

    .tholch-beer-card .tholch-card__link {
      min-height: 42px;
      padding-top: 0.6rem;
      font-size: 0.74rem;
      letter-spacing: 0.06em;
    }

    .tholch-updates-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
    }

    .tholch-update-card .tholch-card__media {
      min-height: 128px;
      aspect-ratio: 1 / 0.86;
    }

    .tholch-update-card .tholch-card__placeholder {
      padding: 0.65rem;
      font-size: clamp(1rem, 7vw, 1.45rem);
    }

    .tholch-update-card .tholch-card__body {
      padding: 0.75rem;
    }

    .tholch-update-card .card-meta {
      margin-bottom: 0.35rem;
      font-size: 0.66rem;
      line-height: 1.15;
    }

    .tholch-update-card h3 {
      margin-bottom: 0.35rem;
      font-size: clamp(1rem, 5.8vw, 1.35rem);
    }

    .tholch-update-card__facts {
      gap: 0.3rem;
      margin-bottom: 0;
    }

    .tholch-update-card__facts span {
      min-height: 24px;
      padding: 0.18rem 0.4rem;
      font-size: 0.58rem;
    }

    .tholch-update-card .tholch-card__body > p:not(.card-meta) {
      display: none;
    }

    .tholch-update-card .tholch-card__link {
      min-height: 42px;
      padding-top: 0.55rem;
      font-size: 0.72rem;
      letter-spacing: 0.06em;
    }

    .tholch-quick-path-card,
    .tholch-beer-card,
    .out-there-card,
    .trade-info-card,
    .contact-card,
    .location-card {
      min-width: 0;
    }

    .single-beer-details__grid,
    .single-beer-details__content,
    .single-beer-details__product,
    .single-beer-specs,
    .about-founders,
    .about-founders__media,
    .about-founders__frame,
    .tholch-story-panel--compact,
    .tholch-story-photo {
      max-width: 100%;
      min-width: 0;
    }

    .single-beer-details__grid,
    .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-beer-details.layout-image-top-content-bottom.has-details-product .single-beer-details__grid,
    .single-beer-details.layout-content-top-image-bottom.has-details-product .single-beer-details__grid {
      width: min(calc(100% - 24px), 920px);
    }

    .single-beer-specs,
    .single-beer-details__product,
    .about-founders__media,
    .about-founders__frame,
    .tholch-story-photo {
      width: 100%;
    }

    .single-beer-specs {
      justify-self: stretch;
    }

    .about-founders__image,
    .tholch-story-photo img {
      max-width: 100%;
      min-width: 0;
    }

    .location-directory-section,
    .beer-archive-content,
    .out-there-archive-content,
    .single-out-there-content-section,
    .trade-section-block,
    .kegs-section,
    .contact-section {
      padding-block: clamp(2.25rem, 10vw, 3.5rem);
    }

    .location-filters {
      grid-template-columns: minmax(0, 1fr);
    }

    .location-map,
    .location-map-panel .location-map {
      width: 100%;
      height: clamp(280px, 58vh, 420px);
      min-height: 280px;
    }

    .location-map__heading,
    .location-map-panel .location-map__heading {
      grid-template-columns: minmax(0, 1fr);
    }

    .location-map__heading .button,
    .location-load-more,
    .location-filter-reset {
      width: 100%;
      justify-content: center;
    }

    .location-card--compact {
      gap: 0.65rem;
      padding: 0.9rem;
    }

    .trade-hero__panel {
      grid-template-columns: minmax(0, 1fr);
    }

    .trade-hero__panel span {
      min-height: 58px;
    }

    .kegs-hero__line span {
      display: block;
    }

    .contact-social-links a,
    .footer-menu a,
    .footer-social-list a {
      min-height: 48px;
    }

    .tholch-social-buttons,
    .is-footer-social,
    .is-contact-social,
    .is-contact-card-social {
      width: auto;
    }

    .tholch-social-button,
    .is-footer-social .tholch-social-button {
      width: 48px;
      min-height: 48px;
      justify-content: center;
    }

    .footer-layout,
    .footer-brand,
    .footer-block {
      max-width: 100%;
    }

    .site-footer {
      padding-top: 1.5rem;
    }

    .footer-layout {
      gap: 1.15rem;
    }

    .footer-brand {
      align-items: center;
      margin-inline: auto;
      text-align: center;
    }

    .footer-logo {
      margin-inline: auto;
    }

    .footer-menu {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-menu a {
      min-height: 38px;
    }

    .footer-bottom {
      align-items: flex-start;
      flex-direction: column;
      margin-top: 1.25rem;
    }

    .tholch-moments {
      padding-block: clamp(2.5rem, 10vw, 3.75rem);
    }

    .tholch-moments__heading {
      margin-bottom: 1.25rem;
    }

    .tholch-moments__heading h2 {
      max-width: 100%;
      font-size: clamp(2.35rem, 11.8vw, 4.4rem);
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
      text-wrap: balance;
    }

    .tholch-moments__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.55rem;
    }

    .tholch-moments__item {
      transform: none;
    }

    .tholch-moment-lightbox {
      padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem max(0.75rem, env(safe-area-inset-bottom));
    }

    .tholch-moment-lightbox__dialog {
      width: 100%;
    }

    .tholch-moment-lightbox__image {
      max-height: calc(100svh - 2rem);
      max-width: 100%;
    }

    .tholch-moment-lightbox__close {
      top: 0.5rem;
      right: 0.5rem;
      width: 50px;
      height: 50px;
    }

    .tholch-moments__button {
      width: 100%;
      justify-content: center;
      min-height: 48px;
    }

@media (max-width: 380px) {
  .tholch-updates-grid {
      grid-template-columns: minmax(0, 1fr);
    }

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

@media (max-width: 360px) {
  .about-team-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

@media (max-width: 480px) {
  body {
      font-size: 16px;
    }

    .container {
      width: min(100% - 20px, var(--tholch-container));
    }

    .site-header {
      backdrop-filter: blur(10px);
    }

    .header-inner {
      min-height: 68px;
      padding-block: 0.65rem;
    }

    .custom-logo {
      max-width: min(146px, calc(100vw - 88px));
    }

    .site-branding .custom-logo {
      max-height: 46px;
    }

    .menu-toggle {
      width: 44px;
      height: 44px;
    }

    .primary-menu a {
      padding: 0.85rem 0;
    }

    .tholch-age-gate {
      align-items: start;
      overflow-y: auto;
      padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem max(0.75rem, env(safe-area-inset-bottom));
    }

    .tholch-age-gate__panel {
      max-height: calc(100svh - 1.5rem);
      overflow-y: auto;
      padding: 1rem;
    }

    .tholch-age-gate h2 {
      font-size: clamp(1.95rem, 11vw, 3.2rem);
    }

    .tholch-age-gate__actions {
      display: grid;
    }

    .tholch-age-gate__actions .button {
      width: 100%;
    }

    .tholch-cookie-banner {
      right: 0.65rem;
      bottom: max(0.65rem, env(safe-area-inset-bottom));
      left: 0.65rem;
    }

    .tholch-cookie-banner__content {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.8rem;
      padding: 0.85rem;
    }

    .tholch-cookie-banner__actions,
    .tholch-cookie-modal__actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-content: stretch;
    }

    .tholch-cookie-banner__actions .button,
    .tholch-cookie-modal__actions .button {
      width: 100%;
      justify-content: center;
    }

    .tholch-cookie-modal {
      align-items: end;
      padding: 0.75rem;
    }

    .tholch-cookie-modal__panel {
      max-height: min(84svh, 720px);
      padding: 1rem;
    }

    .tholch-cookie-modal__head h2 {
      font-size: clamp(1.9rem, 10vw, 3rem);
    }

    .home-hero,
    .tholch-home-hero,
    .single-beer-hero,
    .trade-hero,
    .contact-hero,
    .location-hero,
    .out-there-hero,
    .about-hero,
    .updates-hero {
      padding-top: clamp(3rem, 13vw, 4.5rem);
      padding-bottom: clamp(2.25rem, 10vw, 3.5rem);
    }

    .tholch-home-hero__badge {
      max-width: 100%;
    }

    .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 {
      grid-template-columns: minmax(0, 1fr);
      width: min(calc(100% - 20px), 920px);
    }

    .single-beer-details__product img {
      width: min(100%, 300px);
    }

    .single-beer-details__placeholder {
      width: min(100%, 300px);
      min-height: 220px;
    }

    .single-beer-spec-list li {
      display: grid;
      grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
      align-items: center;
      column-gap: 1rem;
    }

    .single-beer-spec-list span {
      white-space: nowrap;
    }

    .single-beer-spec-list strong {
      min-width: 0;
      justify-self: end;
      text-align: right;
      overflow-wrap: normal;
    }

    .out-there-card__topline,
    .location-card__head {
      align-items: flex-start;
      flex-direction: column;
    }

    .out-there-card__actions,
    .out-there-link-row {
      grid-template-columns: minmax(0, 1fr);
    }

    .out-there-card__actions a,
    .out-there-link-row a,
    .out-there-card__actions .out-there-card__link {
      width: 100%;
      justify-content: center;
    }

    .location-results-summary {
      font-size: 1.25rem;
    }

    .location-card__availability span {
      min-height: 28px;
    }

    .footer-logo .custom-logo {
      max-width: min(100%, 160px);
      height: auto;
      max-height: none;
    }

    .footer-title {
      font-size: clamp(2rem, 12vw, 3.4rem);
    }
  }
}

