/* ==========================================================================
   Peddlers 30A - Mobile Responsive Overrides
   Covers index.html (home), location.html, and about.html
   Breakpoints: 768px (tablet/phone), 480px (small phone)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared / Header
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .why-card__copy-break {
    display: none;
  }

  /* The desktop pill's 144px side padding is sized for the wide category
     cards on a 1920px canvas; on a phone card (~85vw in the horizontal
     scroller) it swallows the whole card, so it's cut down to a normal
     compact badge here. */
  .tag {
    padding: 0.75rem 1.5rem;
  }

  .date-selector__inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .date-selector__field {
    width: calc(50% - 0.5rem);
    max-width: none;
  }

  .date-selector__btn {
    width: 100%;
    max-width: none;
    padding: 0.75rem;
    font-size: 0.8125rem;
    gap: 0.5rem;
  }

  .date-selector__btn svg {
    width: 0.625rem;
    height: 0.375rem;
  }

  .date-picker {
    width: 17.5rem;
    min-width: 0;
  }

  /* Each field is only half the row wide, but the calendar itself needs
     its full size — anchor it to the outer edge of its own button
     (left edge for start, right edge for end) so it stays on-screen
     instead of overflowing past the viewport. */
  [data-date-field="start"] .date-picker {
    left: 0;
  }

  [data-date-field="end"] .date-picker {
    left: auto;
    right: 0;
  }

  .product-hero__grid {
    flex-direction: column;
    min-height: 0;
  }

  .product-hero__media {
    flex: none;
    height: 20rem;
  }

  .product-hero__panel {
    flex: none;
    padding: 2.5rem 1.5rem;
  }

  .product-hero__title {
    font-size: 2.5rem;
  }

  .product-hero__desc {
    font-size: 1.15rem;
  }

  .product-hero__specs {
    grid-template-columns: 1fr;
  }

  .product-hero__spec+.product-hero__spec {
    border-left: none;
    border-top: 1px solid rgba(136, 136, 136, 0.5);
  }

  .product-hero__spec-value {
    font-size: 1.5rem;
  }

  .product-hero__pills {
    flex-wrap: wrap;
    justify-content: center;
  }

  .product-hero__pill {
    font-size: 1.25rem;
  }

  .product-hero__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    text-align: center;
  }

  .product-hero__price-label,
  .product-hero__price {
    text-align: center;
  }

  .product-hero__book-btn {
    text-align: center;
  }

  .site-header__inner {
    gap: 0.75rem;
    min-height: 3.75rem;
    padding: 0 1rem;
  }

  .site-header__logo img {
    width: 11rem;
    height: 2.1rem;
  }

  /* .site-header__toggle / .site-nav (open sidebar) styling now lives
     entirely in sections.css's max-width:1440px block, so it's
     consistent across the whole hamburger range instead of this file
     and that one defining two different (and conflicting) panel
     styles for the ≤768px slice of it. */

  /* Phone button — icon only on tablet/mobile */
  .merch-card__label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-script-sm);
    line-height: 1;
    color: var(--white);
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .site-header__actions .btn--primary {
    font-size: 0;
    padding: 0;
    width: 3.5rem;
    height: 2.5rem;
    gap: 0;
    flex-shrink: 0;
  }

  .site-header__actions .btn--primary .btn__icon {
    width: 1.1rem;
    height: 1.1rem;
  }

  .site-header__actions .btn--sand {
    height: 2.5rem;
    padding-inline: 0.85rem;
    font-size: 0.68rem;
  }

  /* ---- Footer ---- */
  .site-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
  }

  .site-footer__base {
    flex-direction: column;
    text-align: center;
  }

  /* ---- Hero (home) ---- */
  .hero {
    height: auto;
    min-height: 28rem;
    padding-block: 5rem 3rem;
  }

  .hero__title {
    font-size: 2.5rem;
  }

  .hero__lead {
    font-size: 1rem;
    margin-top: var(--sp-4);
  }

  .hero__actions {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    margin-top: var(--sp-5);
  }

  .hero__actions .btn {
    padding-inline: 1.25rem;
    font-size: 0.8rem;
    min-height: 2.75rem;
  }

  /* ---- Trust bar ---- */
  .trust__bar {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4) var(--sp-3);
  }

  .trust-bar__inner {
    gap: 1.75rem 2.5rem;
  }

  .trust-bar__label {
    font-size: 1.125rem;
  }

  .trust__title {
    font-size: 0.85rem;
  }

  .trust__meta {
    font-size: 0.85rem;
  }

  /* ---- About split (home) ---- */
  .about {
    grid-template-columns: 1fr;
  }

  .about__panel {
    padding: var(--sp-7) var(--gutter);
  }

  .about__title {
    font-size: 2rem;
  }

  .about__stats {
    gap: 2rem;
  }

  .about__media {
    min-height: 30rem;
  }

  .curated-grid-1 {
    display: flex !important;
    flex-direction: column-reverse;

    gap: 2.5rem !important;
  }

  .curated-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .fleet__inner {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    gap: 2.5rem;
  }

  .fleet__title {
    font-size: 2rem;
  }

  .fleet__lead {
    font-size: 1.125rem;
  }

  .fleet__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .fleet__col {
    gap: 2rem;
  }

  .fleet__photo {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  /* Stacking the two columns puts the left column's photo (its last item)
     directly against the right column's photo (its first item), with no
     text between them. Move it to the top of its own column instead, so
     the two photos end up separated by the left column's two text blocks. */
  .fleet__col:first-child .fleet__photo {
    order: -1;
    margin-top: 0;
    margin-bottom: 1.25rem;
  }

  /* ---- Category tiles ---- */
  .categories__grid {
    gap: var(--sp-4);
  }

  /* ---- Rental header ---- */
  .rental {
    padding: 3rem 0;
  }

  .rental__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .rental__title {
    font-size: 2rem;
  }

  .rental__subtitle {
    font-size: 1rem;
  }

  .rental__view-more {
    font-size: 0.85rem;
    padding-inline: 1.25rem;
  }

  .rental__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* ---- Day banner ---- */
  .day-banner__inner {
    flex-direction: column;
    text-align: center;
  }

  .day-banner__title {
    font-size: 2rem;
  }

  .day-banner__badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6rem;
    justify-items: center;
  }

  /* ---- Why grid ---- */
  .why__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .why-cards {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .why-card {
    padding: 1.5rem;
  }

  .why__item+.why__item::before {
    display: none;
  }

  .why__title {
    font-size: 2rem;
  }

  /* ---- Experiences ---- */
  .experiences__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .experiences__title {
    font-size: 2rem;
  }

  .experiences__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .exp-card:nth-child(odd) {
    margin-top: 0;
  }

  .exp-card__body {
    padding: 1.25rem;
  }

  .exp-card__name {
    font-size: 1.375rem;
    /* 22px — the 31px desktop size was wrapping to 3 tight lines on a
       narrow carousel card */
    line-height: 1.25;
  }

  .exp-card__meta {
    font-size: 0.9375rem;
    /* 15px */
  }

  /* ---- Pavilion split ---- */
  .pavilion {
    grid-template-columns: 1fr;
  }

  .pavilion__media {
    /* min-height: 0;
    aspect-ratio: 16 / 9; */
  }

  .pavilion__panel {
    padding: var(--sp-7) var(--gutter);
  }

  .pavilion__title {
    font-size: 2rem;
  }

  .beaches__title,
  .inquiry__title,
  .direct-connection__title,
  .seasonal-hours__title {
    font-size: 2rem;
  }

  .pavilion__content .btn {
    min-width: unset;
    width: 100%;
  }

  /* ---- Gathering grid ---- */
  .gathering__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .gathering__title {
    font-size: 2rem;
  }

  /* ---- Merch grid ---- */
  .merch__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .merch__title {
    font-size: 2rem;
  }

  /* ---- Path grid ---- */
  .path__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .path__title {
    font-size: 2rem;
  }

  .path-card {
    aspect-ratio: 4 / 3;
  }

  .path-card__body {
    padding: 1.25rem;
  }

  .path-card__num {
    font-size: 1.75rem;
  }

  .path-card__name {
    margin-top: 0.5rem;
    font-size: 1.25rem;
  }

  .path-card__copy {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
  }

  /* ---- Rhythms timeline ---- */
  .rhythms__title {
    font-size: 2rem;
    margin-bottom: 2.5rem;
  }

  .rhythms__timeline {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    row-gap: 8rem;
  }

  .rhythm-node {
    flex: 0 0 40%;
  }

  .rhythm-node__num {
    font-size: 0.75rem;
  }

  .rhythms__timeline::before {
    display: none;
  }

  /* ---- Live music ---- */
  .live__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .live__title {
    font-size: 2rem;
  }

  /* ---- Gallery ---- */
  .gallery__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
  }



  .gallery__title {
    font-size: 2rem;
  }

  /* ---- Testimonials ---- */
  .testimonials__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .testimonials__title {
    font-size: 2rem;
  }

  .quote__text {
    font-size: 1.35rem;
  }

  /* ---- FAQ ---- */
  .faq__title {
    font-size: 2rem;
  }

  .faq .accordion__trigger {
    font-size: 1.1rem;
    padding: 1rem 1.25rem;
  }

  /* ---- Closing CTA ---- */
  .closing__title {
    font-size: 2.5rem;
  }

  .closing__actions {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .closing__actions .btn {
    width: 100%;
    max-width: 18rem;
  }

  /* ---- Contact ---- */
  .contact__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .contact__title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  .contact__map img,
  .contact__map iframe {
    height: 20rem;
  }
}

/* --------------------------------------------------------------------------
   About Page — mobile
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .ab-hero {
    height: auto;
    min-height: 22rem;
    padding-block: 4rem;
  }

  .ab-story {
    grid-template-columns: 1fr;
  }

  .ab-story__panel {
    padding: var(--sp-7) var(--gutter);
  }

  .ab-story__media {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  .ab-paradise {
    grid-template-columns: 1fr;
  }

  .ab-paradise__media {
    order: -1;
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  .ab-paradise__content {
    padding: var(--sp-7) var(--gutter);
  }

  .ab-routes li {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  .ab-fleet__grid {
    grid-template-columns: 1fr;
  }

  .ab-fleet__col--offset {
    margin-top: 0;
  }

  .ab-fleet {
    padding-block: 4rem;
  }
}

/* --------------------------------------------------------------------------
   Location Page — mobile
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .loc-hero {
    min-height: 22rem;
    padding-block: 4rem var(--sp-7);
  }

  .loc-hero__title {
    font-size: var(--fs-script-md);
  }

  .loc-hero__lead {
    font-size: var(--fs-body-md);
  }

  .loc-badges {
    gap: var(--sp-2);
  }

  .loc-bikes__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .loc-cat-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .loc-dining__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .loc-standard__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .loc-standard {
    padding-block: var(--sp-7);
  }

  .closing-split {
    padding: 1.5rem;
  }
  .closing-split__card {
    height: 26rem;
  }
  .closing-split__content {
    padding: 2.5rem 1.5rem;
    gap: 1.5rem;
    max-width: 100%;
  }
  .closing-split__title {
    font-size: 2.5rem;
    white-space: normal;
  }
  .closing-split__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .closing-split__btn {
    width: 100%;
    padding: 1rem 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   Extra small phones (480px)
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

  .hero__title {
    font-size: 2.25rem;
  }

  .hero__lead {
    font-size: 0.9rem;
  }

  .hero {
    min-height: 24rem;
    padding-block: 3.5rem 2.5rem;
  }

  .day-badge__circle {
    width: 5.5rem;
    height: 5.5rem;
  }

  .loc-dining__grid,
  .loc-bikes__grid {
    grid-template-columns: 1fr;
  }

  .site-header__actions .btn--sand {
    display: inline-flex;
    padding: 0.5rem 0.65rem;
    font-size: 0.6rem;
    white-space: nowrap;
  }

  .site-footer__cols {
    grid-template-columns: 1fr;
  }

  .ab-hero {
    min-height: 18rem;
  }

  .loc-hero {
    min-height: 18rem;
  }

  .closing__title {
    font-size: 2rem;
  }

  .about__body {
    margin-top: 1.25rem;
    font-size: 1.125rem;
  }

  .about__stat-lbl {
    font-size: 1.125rem;
  }

  .pavilion__body {
    margin-top: 1.5rem;
    font-size: 1.125rem;
  }

  .pavilion__list {
    gap: 1rem;
  }

  .pavilion__list li {
    font-size: 1.25rem;
    gap: 0.75rem;
  }

  .pavilion__list img {
    width: 1.5rem;
    height: 1.5rem;
  }

  .rhythm-node__label,
  .craving-card__step {
    font-size: 1.25rem;
  }

  .direct-connection__lead,
  .seasonal-hours__lead,
  .about__copy,
  .local-intro__copy,
  .pillars__lead,
  .pillar__copy,
  .cravings__lead,
  .why-card__copy,
  .fleet__item-copy,
  .fleet__item-list,
  .live__lead,
  .service-card__copy,
  .beaches__lead,
  .beach-card__copy {
    font-size: 1.125rem;
  }

  .product-hero__price {
    font-size: 2rem;
  }

  .live__num {
    font-size: 1.75rem;
  }

  .journey__stop-value {
    font-size: 1.5rem;
  }

  .service-card__num {
    font-size: 1.75rem;
  }

  .pillar__title-sm {
    font-size: 1.375rem;
  }

  /* ---- Location Page Responsive ---- */
  .page-location .hero__title {
    font-size: 3.5rem !important;
  }
  .page-location .hero__lead {
    font-size: 1.15rem !important;
  }

  /* ---- All Locations Index Page Responsive ----
     This page's hero used the same 80vh/700px inline sizing as every
     single-location page, but with much shorter copy it left a large
     empty gap before the card grid -- shrink it here only. Its card grid
     also doesn't get the horizontal-scroll-carousel treatment every other
     .beaches__grid gets on mobile, since with 12 cards a swipeable strip
     is worse than a simple stacked list. */
  .page-locations .hero--location {
    height: auto !important;
    min-height: 32rem !important;
    padding-block: 6rem 3rem;
  }

  .page-locations .hero__title {
    font-size: 2.5rem !important;
  }

  .page-locations .hero__lead {
    font-size: 1.15rem !important;
  }

  .page-locations .beaches__grid {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    gap: 1.5rem !important;
    padding-bottom: 0 !important;
  }

  .page-locations .beaches__grid > * {
    flex: 1 1 auto !important;
    max-width: none !important;
  }
  .page-location .rental-filters,
  .page-rentals .rental-filters,
  .page-category .rental-filters {
    flex-direction: column;
    align-items: center;
    margin: 2.5rem 0;
  }
  .page-location .rental-filters__btn,
  .page-rentals .rental-filters__btn,
  .page-category .rental-filters__btn {
    width: 100%;
    max-width: none;
    padding: 1rem 1.25rem;
  }
  .rental--category .rental__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .page-location .pillars__grid,
  .page-location .cravings__grid,
  .beaches__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .page-location .pillars__grid::-webkit-scrollbar,
  .page-location .cravings__grid::-webkit-scrollbar,
  .beaches__grid::-webkit-scrollbar {
    display: none !important;
  }

  .page-location .pillars__grid > *,
  .page-location .cravings__grid > *,
  .beaches__grid > * {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    scroll-snap-align: start !important;
  }

  .page-location .pillar__media {
    aspect-ratio: 4 / 3;
  }

  .beach-card__media {
    height: 16rem;
  }

  .page-location .beaches__more {
    width: 100%;
    max-width: 20rem;
  }

  .page-location .service__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .local-intro h2 {
    font-size: 2.5rem !important;
  }
  .page-location .pillars h2,
  .page-location .cravings h2 {
    font-size: 2.5rem !important;
  }
  .local-intro p {
    font-size: 1.15rem !important;
  }
  /* ---- Rentals Page Responsive ---- */
  .page-rentals .hero__title {
    font-size: 2.5rem;
  }
  .page-rentals .hero__actions {
    flex-direction: column !important;
  }
  .page-rentals .hero__actions .btn {
    width: 100% !important;
    text-align: center;
  }
  .pricing__title {
    font-size: 2.5rem;
  }
  .pricing__lead {
    font-size: 1.15rem;
  }
  .pricing-tabs {
    flex-wrap: wrap;
    justify-content: center;
  }
  .pricing-card {
    flex: 1 0 100%;
    max-width: 26rem;
  }
  .pricing-card__badge {
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
  }
  .rental-process__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .rental-process__head {
    max-width: none;
  }
  .rental-process__title {
    font-size: 2rem;
  }
  .rental-process__steps {
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    margin-top: 1rem;
  }
  .rental-process__line {
    display: none;
  }
  .rental-process__step {
    min-width: 0;
  }

  /* ---- Contact Page Responsive ---- */
  .page-contact .hero__title {
    font-size: 2.5rem !important;
  }
  .page-contact .hero__actions {
    flex-direction: column !important;
  }
  .page-contact .hero__actions .btn {
    width: 100% !important;
    text-align: center;
  }
  .page-contact .direct-connection__inner {
    padding-inline: var(--gutter);
  }

  .page-contact .inquiry__grid,
  .page-contact .inquiry-form__row,
  .page-contact .direct-connection__grid,
  .page-contact .seasonal-hours__card {
    grid-template-columns: 1fr !important;
  }
  .page-contact .inquiry__grid > div {
    padding: 3rem 1.5rem !important;
  }
  .page-contact .seasonal-hours__intro,
  .page-contact .seasonal-hours__list {
    padding: 3rem 1.5rem !important;
  }
  .page-contact .inquiry__image {
    display: none !important;
  }
}