/* Company 51 — Mobile homepage polish v0.5.71 */

/* Move to the compact header before the desktop navigation becomes crowded. */
@media (max-width: 1100px) {
  .c51-site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: .75rem;
  }

  .c51-primary-nav {
    display: none !important;
  }

  .c51-site-header__actions {
    display: none !important;
  }

  .c51-navigation-shell {
    grid-column: 2;
    justify-self: end;
  }

  .c51-mobile-nav-toggle {
    display: inline-flex !important;
  }
}

@media (min-width: 1101px) {
  .c51-mobile-nav-toggle {
    display: none !important;
  }
}

/* Hero benefits remain visible on mobile and stack into a 2×2 grid. */
@media (max-width: 760px) {
  body.home .c51-hero__benefits,
  body.front-page .c51-hero__benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem .75rem;
    width: 100%;
    margin: 0 0 1.2rem;
  }

  body.home .c51-hero__benefit,
  body.front-page .c51-hero__benefit {
    min-height: 3.5rem;
    align-content: start;
    justify-items: start;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    gap: .6rem;
    text-align: left;
  }

  body.home .c51-hero__benefit img,
  body.front-page .c51-hero__benefit img {
    width: 1.5rem;
    height: 1.5rem;
  }

  body.home .c51-hero__benefit span,
  body.front-page .c51-hero__benefit span {
    align-self: center;
    font-size: .58rem;
    line-height: 1.25;
  }

  body.home .c51-hero__actions .wp-block-buttons,
  body.front-page .c51-hero__actions .wp-block-buttons,
  body.home .c51-hero__actions .wp-block-button,
  body.front-page .c51-hero__actions .wp-block-button {
    display: block;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.home .c51-hero__content,
  body.front-page .c51-hero__content,
  body.home .c51-hero__actions,
  body.front-page .c51-hero__actions,
  body.home .c51-hero__actions .wp-block-buttons,
  body.front-page .c51-hero__actions .wp-block-buttons {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.home .c51-hero__actions .wp-block-button__link,
  body.front-page .c51-hero__actions .wp-block-button__link {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 3.25rem;
    box-sizing: border-box;
  }
}

/* Keep all four homepage membership stats readable as a balanced 2×2 grid. */
@media (max-width: 600px) {
  body.home .c51-membership__metrics,
  body.front-page .c51-membership__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: .25rem .5rem .75rem;
  }

  body.home .c51-membership__metric,
  body.front-page .c51-membership__metric {
    min-height: 6rem;
    padding: .65rem .4rem;
  }

  body.home .c51-membership__metric:nth-child(3)::before,
  body.front-page .c51-membership__metric:nth-child(3)::before {
    display: none;
  }

  body.home .c51-membership__metric:nth-child(3)::after,
  body.home .c51-membership__metric:nth-child(4)::after,
  body.front-page .c51-membership__metric:nth-child(3)::after,
  body.front-page .c51-membership__metric:nth-child(4)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    width: 76%;
    height: 1px;
    background: rgba(255,255,255,.2);
  }

  body.home .c51-membership__metric strong,
  body.front-page .c51-membership__metric strong {
    font-size: 1.65rem;
    line-height: 1;
  }

  body.home .c51-membership__metric > span:last-child,
  body.front-page .c51-membership__metric > span:last-child {
    font-size: .58rem;
  }
}

/* Stack the plans and improve reading size without changing their content. */
@media (max-width: 760px) {
  body.home .c51-tiers__grid,
  body.front-page .c51-tiers__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem;
  }

  body.home .c51-tier-card__body,
  body.home .c51-tier-info,
  body.front-page .c51-tier-card__body,
  body.front-page .c51-tier-info {
    padding: 1.15rem;
  }

  body.home .c51-tier-card--premium .c51-tier-card__body,
  body.front-page .c51-tier-card--premium .c51-tier-card__body {
    padding-top: 1.45rem;
  }

  body.home .c51-tier-card__name,
  body.front-page .c51-tier-card__name {
    font-size: clamp(2rem, 9vw, 2.7rem);
    line-height: .95;
  }

  body.home .c51-tier-card__price,
  body.front-page .c51-tier-card__price {
    font-size: 1.2rem;
    line-height: 1.2;
  }

  body.home .c51-tier-card__benefits li,
  body.front-page .c51-tier-card__benefits li {
    font-size: .82rem;
    line-height: 1.4;
  }

  body.home .c51-tier-info__list strong,
  body.front-page .c51-tier-info__list strong {
    font-size: .82rem;
    line-height: 1.3;
  }

  body.home .c51-tier-info__list small,
  body.front-page .c51-tier-info__list small {
    font-size: .7rem;
    line-height: 1.35;
  }

  body.home .c51-tier-info__note,
  body.front-page .c51-tier-info__note {
    margin-top: 1rem;
    padding: .85rem;
  }

  body.home .c51-tier-info__note p,
  body.front-page .c51-tier-info__note p {
    font-size: .78rem;
    line-height: 1.45;
    overflow-wrap: break-word;
  }
}

/* The mobile community artwork is an intentional square 2×2 composition. */
@media (max-width: 760px) {
  body.home .c51-community-preview__inner,
  body.front-page .c51-community-preview__inner {
    gap: 1.25rem;
    padding-block: 2rem;
  }

  body.home .c51-community-preview__tiles,
  body.front-page .c51-community-preview__tiles {
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  body.home .c51-community-preview__tile-stat,
  body.front-page .c51-community-preview__tile-stat {
    gap: .18rem;
    padding-inline: .2rem;
  }

  body.home .c51-community-preview__tile-stat strong,
  body.front-page .c51-community-preview__tile-stat strong {
    font-size: clamp(1.05rem, 6vw, 1.65rem);
  }

  body.home .c51-community-preview__tile-stat span,
  body.front-page .c51-community-preview__tile-stat span {
    font-size: clamp(.55rem, 2.6vw, .75rem);
  }
}

/* Product shelves stay touch-scrollable, with a clear next-card preview. */
@media (max-width: 900px) {
  body.home .c51-gear__viewport,
  body.home .c51-magazines__viewport,
  body.front-page .c51-gear__viewport,
  body.front-page .c51-magazines__viewport {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: .25rem;
    touch-action: pan-x;
  }

  body.home .c51-gear-card,
  body.front-page .c51-gear-card {
    flex-basis: min(15.5rem, calc(100vw - 2rem));
  }

  body.home .c51-magazine-card,
  body.front-page .c51-magazine-card {
    flex-basis: min(18rem, calc(100vw - 2rem));
  }
}

/* Keep the final conversion prompt compact and thumb-friendly. */
@media (max-width: 600px) {
  body.home .c51-join-cta__inner,
  body.front-page .c51-join-cta__inner {
    width: min(calc(100% - 2rem), 42rem);
    max-width: calc(100% - 2rem);
    min-width: 0;
    padding-block: 3rem;
    gap: 1.5rem;
  }

  body.home .c51-join-cta__copy,
  body.front-page .c51-join-cta__copy,
  body.home .c51-join-cta__action,
  body.front-page .c51-join-cta__action {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.home .c51-join-cta__title,
  body.front-page .c51-join-cta__title {
    font-size: clamp(2.35rem, 11vw, 3.4rem);
    line-height: .94;
  }

  body.home .c51-join-cta__description,
  body.front-page .c51-join-cta__description {
    font-size: .92rem;
    line-height: 1.45;
  }

  body.home .c51-join-cta__button,
  body.front-page .c51-join-cta__button {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 3.5rem;
    box-sizing: border-box;
  }
}


/* Restore the full brand lockup in the compact mobile header. */
@media (max-width: 600px) {
  .c51-site-header__brand-lockup {
    gap: .45rem;
  }

  .c51-site-header__brand-copy {
    display: flex !important;
    min-width: 0;
    max-width: 7.4rem;
  }

  .c51-site-header__brand-name {
    font-size: .76rem;
    letter-spacing: .035em;
    white-space: nowrap;
  }

  .c51-site-header__brand-tagline {
    font-size: .32rem;
    letter-spacing: .075em;
    white-space: nowrap;
  }
}

/* Keep the hero face area clear of the headline and trim excess black space. */
@media (max-width: 600px) {
  body.home .c51-hero,
  body.front-page .c51-hero,
  body.home .c51-hero .c51-container,
  body.front-page .c51-hero .c51-container {
    min-height: 640px;
  }

  body.home .c51-hero .c51-container,
  body.front-page .c51-hero .c51-container {
    padding-bottom: 2.75rem;
  }
}

@media (max-width: 380px) {
  body.home .c51-hero,
  body.front-page .c51-hero,
  body.home .c51-hero .c51-container,
  body.front-page .c51-hero .c51-container {
    min-height: 620px;
  }
}

/* Keep carousel headings and their view-all links on one tidy row. */
@media (max-width: 520px) {
  body.home .c51-gear__header,
  body.front-page .c51-gear__header,
  body.home .c51-magazines__header,
  body.front-page .c51-magazines__header {
    gap: .45rem;
    align-items: center;
  }

  body.home .c51-gear__heading-wrap,
  body.front-page .c51-gear__heading-wrap,
  body.home .c51-magazines__heading-wrap,
  body.front-page .c51-magazines__heading-wrap {
    min-width: 0;
    gap: .4rem;
  }

  body.home .c51-gear__title,
  body.front-page .c51-gear__title,
  body.home .c51-magazines__title,
  body.front-page .c51-magazines__title {
    gap: .4rem;
    font-size: .88rem;
    letter-spacing: .075em;
    white-space: nowrap;
  }

  body.home .c51-gear__title .c51-home-section-icon,
  body.front-page .c51-gear__title .c51-home-section-icon,
  body.home .c51-magazines__title .c51-home-section-icon,
  body.front-page .c51-magazines__title .c51-home-section-icon {
    width: 1.3rem;
    height: 1.3rem;
  }

  body.home .c51-gear__rule,
  body.front-page .c51-gear__rule,
  body.home .c51-magazines__rule,
  body.front-page .c51-magazines__rule {
    display: none;
  }

  body.home .c51-gear__view-all,
  body.front-page .c51-gear__view-all,
  body.home .c51-magazines__view-all,
  body.front-page .c51-magazines__view-all {
    font-size: .48rem;
    letter-spacing: .045em;
  }
}

/* Make social links comfortable to tap on narrow screens. */
@media (max-width: 600px) {
  .c51-social-icon {
    width: 2.75rem;
    height: 2.75rem;
    font-size: .95rem;
  }
}