/* Touch-target and small-screen corrections.
   Loaded AFTER each page's inline <style> so these win on equal specificity.

   Apple's HIG and WCAG 2.5.5 both want ~44px of tappable height. The desktop
   nav is set for a mouse; on a phone the same links are 18px tall, which is a
   real miss-tap risk. Padding is added rather than font size, so the type
   stays as designed. */

@media (max-width: 760px) {

    /* Nav — grow the hit area, keep the type size */
    .nav-links a {
        padding: 0.62rem 0;
        display: inline-block;
        min-height: 44px;
        line-height: 1.55;
    }

    .logo {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0.35rem 0;
    }

    /* Announcement strip: bigger dismiss button and link */
    .onsale-strip a { display: inline-block; padding: 0.35rem 0; }

    .onsale-strip button {
        width: 44px;
        height: 44px;
        right: 0.25rem;
    }

    /* Buttons and controls */
    .cta-btn,
    .btn,
    .go,
    .pay-btn,
    .subscribe-fab,
    .prod .notify,
    .chip {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .basket-head button,
    .subscribe-close {
        width: 44px;
        height: 44px;
    }

    .basket-line .qty button {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .hero-dots button {
        height: 14px;              /* thin bar, but tappable */
        display: flex;
        align-items: center;
        background-clip: content-box;
        padding: 6px 0;
    }

    .toc a { padding: 0.7rem 0; min-height: 44px; align-items: center; }

    /* Form fields at 16px stop iOS Safari zooming in on focus */
    input[type="email"],
    input[type="search"],
    input[type="text"] {
        font-size: 16px;
    }

    /* Tables scroll rather than squash */
    .scroll, .kim-scroll { -webkit-overflow-scrolling: touch; }
}

/* Tablets: the sidebar layout is too narrow to be useful much below 1000px,
   and the product grid wants two columns rather than one. */
@media (min-width: 761px) and (max-width: 1024px) {
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .seats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-head { padding-left: 6%; padding-right: 6%; }
    main, .wrap { padding-left: 6%; padding-right: 6%; }
    nav { padding-left: 6%; padding-right: 6%; }
}

/* Short landscape phones: a 100vh hero leaves no room for anything */
@media (max-height: 520px) and (orientation: landscape) {
    .hero { height: auto; min-height: 30rem; padding-top: 6rem; padding-bottom: 4rem; }
    .hero-dots { bottom: 1.6rem; }
    .photo-credit { bottom: 0.5rem; }
}

/* Respect users who ask for less motion, across every page */
@media (prefers-reduced-motion: reduce) {
    .hero-slide { animation: none !important; }
}

/* The homepage legal line sits bottom-right on desktop; on a phone the
   Subscribe pill occupies that corner, so move it under the credit. */
@media (max-width: 760px) {
    .site-legal {
        right: auto;
        left: 6%;
        bottom: 2.4rem;
        text-align: left;
        max-width: 62%;
        font-size: 0.6rem;
    }
}