/* ==========================================================================
   YADEA — Responsive layer
   Breakpoints
     ≤1439  small desktop        ≤1023  tablet (burger menu)
     ≤1279  laptop               ≤767   phone
                                 ≤479   small phone
   Organised by component so each block can be found quickly.
   ========================================================================== */

/* Centre tab bars when they fit, scroll them when they don't */
.series__tabs-inner > :first-child { margin-left: auto; }
.series__tabs-inner > :last-child { margin-right: auto; }
.hide-sm { display: inline; }

/* ======================= ≤1439 ======================= */
@media (max-width: 1439px) {
  .mainnav { padding-left: clamp(24px, 6vw, 110px); }
  .footer__main { gap: 32px; }
}

/* ======================= ≤1279 ======================= */
@media (max-width: 1279px) {
  .mainnav { padding-left: 32px; }
  .mainnav__list { gap: 26px; }
  .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega__inner { grid-template-columns: 200px 1fr; gap: 32px; }

  .footer__main { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .footer__main--compact { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); }
  .footer__subscribe { grid-column: 1 / -1; max-width: 460px; }
  .footer__main--compact .footer__subscribe { grid-column: auto; }

  /* home */
  .showcase__item { --item-w: 52%; }
  .feature__grid { gap: 48px; }

  /* product */
  .p-feature--battery .p-feature__desc br,
  .p-feature--motor .p-feature__desc br { display: none; }
}

/* ======================= ≤1023 (tablet) ======================= */
@media (max-width: 1023px) {
  /* header */
  .mainnav { display: none; }
  .burger { display: grid; }
  .navbar__actions { gap: 0; margin-right: -10px; }
  .mega { display: none; }
  .search-panel__inner { padding-block: 24px 32px; }
  .search-form input { font-size: var(--fs-md); }

  /* side tools */
  .side-tools__btn { width: 52px; height: 52px; font-size: 22px; }
  .side-tools__label { display: none; }

  /* footer */
  .footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 56px 48px; }
  .footer__main--compact { grid-template-columns: 1fr; }
  .footer__main--compact .footer__subscribe { max-width: 460px; }

  /* ---------- home ---------- */
  .hero__content { bottom: clamp(140px, 20vh, 220px); }
  .series__arrow { width: 42px; height: 42px; font-size: 20px; }
  .series__arrow--next { right: var(--gutter); }
  .showcase__item { --item-w: 62%; }
  .showcase__arrow--prev { left: var(--gutter); }
  .showcase__arrow--next { right: var(--gutter); }
  .feature__grid { grid-template-columns: 1fr; }
  .feature__content { max-width: 620px; }
  .models__track, .news__track { --cols: 2; }
  .planet__stats { grid-template-columns: 1fr; gap: 40px; }
  .planet__inner { padding-top: clamp(200px, 30vw, 320px); }
  .planet__bg img { object-position: center bottom; }
  .planet::after { background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 9%, rgba(6, 32, 16, .38) 28%, rgba(4, 28, 14, .72) 100%); }
  .planet__title { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
  .social__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-card { padding: 24px 24px 0; }
  .social-card__more { height: 60px; }

  /* ---------- product: feature panels stack (image, then copy) ---------- */
  .p-feature { aspect-ratio: auto; background: var(--stack-bg, #111); }
  .p-feature__media { position: relative; aspect-ratio: 16 / 9; }
  .p-feature__text,
  .p-feature--smart .p-feature__text {
    position: static;
    width: auto; max-width: 680px;
    transform: none;
    padding: 36px var(--gutter) 48px;
    color: var(--stack-ink, #fff);
  }
  .p-feature__title { font-size: clamp(1.375rem, 1rem + 1.6vw, 1.75rem); }
  .p-feature__desc { font-size: var(--fs-sm); margin-top: 14px; }
  .p-feature__desc br { display: none; }
  .p-feature--modes .p-feature__desc br,
  .p-feature--controller .p-feature__desc br { display: inline; }
  .p-feature__text--light .p-feature__desc { text-shadow: none; }
  .p-feature--tough      { --stack-bg: #1b1612; }
  .p-feature--tires      { --stack-bg: #0c1417; }
  .p-feature--headlight  { --stack-bg: #1c1f22; }
  .p-feature--battery    { --stack-bg: #efe6e1; --stack-ink: #2b2b2b; }
  .p-feature--motor      { --stack-bg: #f3e9e3; --stack-ink: #2b2b2b; }
  .p-feature--controller { --stack-bg: #ecd5c9; --stack-ink: #2b2b2b; }
  .p-feature--modes      { --stack-bg: #1f2d1b; }
  .p-feature--smart      { --stack-bg: #fff; --stack-ink: #2b2b2b; }
  .p-feature--smart .p-feature__media { aspect-ratio: 4 / 3; }
  .p-feature--smart .p-feature__media img { object-position: 78% center; }
  .p-feature--smart .p-feature__text { padding-top: 12px; }
  .p-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; margin-top: 28px; }
  .p-stat__value { font-size: 1.75rem; }
  .p-stat__label { font-size: var(--fs-xs); }
  .p-smart__title { font-size: 1.375rem; }
  .p-smart__list { font-size: var(--fs-sm); }

  .p-tabs__media, .p-tabs--wide .p-tabs__media { width: calc(100% - 2 * var(--gutter)); }
  .p-tabs__list, .p-tabs--wide .p-tabs__list { width: calc(100% - 2 * var(--gutter)); gap: 20px; }
  .p-tab__desc > span { font-size: var(--fs-sm); }

  .p-specs__inner { width: calc(100% - 2 * var(--gutter)); }
  .p-storage__grid { width: calc(100% - 2 * var(--gutter)); }
  .p-storage__text { padding: 20px 8% 20px 10%; }
}

/* ======================= ≤767 (phone) ======================= */
@media (max-width: 767px) {
  .hide-sm { display: none; }
  .section-title { font-size: 1.875rem; }
  .btn { min-height: 46px; }
  .btn--sm { min-height: 40px; }

  /* header */
  .brand { width: 118px; height: 33px; }
  .search-form { padding-bottom: 6px; }

  /* side tools: keep only "back to top" on phones */
  .side-tools { bottom: 16px; right: 12px; }
  .side-tools__group { display: none; }
  .side-tools__top { width: 46px; height: 46px; border-radius: 50%; font-size: 20px; }

  /* footer accordion */
  .footer__main, .footer__main--compact { grid-template-columns: 1fr; gap: 0; padding-block: 32px 40px; }
  .footer__col { border-bottom: 1px solid var(--c-footer-line); }
  .footer__heading-btn { padding: 18px 0; cursor: pointer; }
  .footer__heading-btn .icon { display: block; font-size: 18px; transition: transform var(--dur-fast) var(--ease); }
  .footer__col.is-open .footer__heading-btn .icon { transform: rotate(180deg); }
  .footer__col .footer__links,
  .footer__col .footer__cols { display: none; }
  .footer__col.is-open .footer__links { display: grid; margin-top: 0; padding-bottom: 20px; }
  .footer__col.is-open .footer__cols { display: grid; gap: 0; }
  .footer__col.is-open .footer__cols .footer__links { padding-bottom: 12px; }
  .footer__subscribe { margin-top: 36px; }
  .socials { margin-top: 28px; flex-wrap: wrap; }
  .footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer__legal { gap: 20px; flex-wrap: wrap; }

  /* ---------- home ---------- */
  .hero { height: 100svh; min-height: 520px; }
  .hero__content { bottom: 118px; }
  .hero__title { font-size: 2.25rem; }
  .hero__ui { bottom: 28px; }
  .hero__slide::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .15) 100%);
  }

  .series__intro .section-title { font-size: 1.875rem; }
  .series__tabs-inner { gap: 26px; height: 52px; }
  .series__tab { font-size: var(--fs-sm); }
  .series__stage { height: min(112vw, 76svh); }
  .series__caption { justify-content: flex-end; padding: 0 var(--gutter) 44px; }
  .series__slide::after { background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 55%); }
  .series__title { font-size: 1.75rem; }
  .series__caption .btn { margin-top: 20px; }
  .series__arrow { display: none; }

  .showcase { padding-block: 44px 56px; }
  .showcase__item { --item-w: 80%; transform: scale(.8); }
  .showcase__arrow { display: none; }
  .showcase__dots { margin-top: 24px; }

  .feature__title { font-size: 2.25rem; }
  .feature__tagline { letter-spacing: .22em; }
  .feature__actions .btn { flex: 1 1 auto; }

  .section-head { align-items: center; }
  .section-head__nav .round-btn { width: 42px; height: 42px; font-size: 18px; }
  .section-head__nav .link-arrow { display: none; }
  .models__track, .news__track { grid-auto-columns: 84%; }
  .model-card__tag { font-size: var(--fs-xs); }
  .news-card__body { padding: 22px 22px 24px; }

  .planet { min-height: 0; }
  .planet__inner { padding-block: 190px 56px; }
  .planet__title { font-size: 1.75rem; }
  .stat__icon { width: 52px; height: 52px; margin-bottom: 12px; }

  .green__slider { aspect-ratio: 4 / 3; }
  .green__inner { padding-inline: 0; }
  .green__note { padding-inline: var(--gutter); }

  .social__grid { grid-template-columns: 1fr; }
  .social-card { padding: 18px 18px 0; }
  .social__title { font-size: 2rem; }

  /* ---------- product ---------- */
  /* On phones the hero sits under a solid header so the artwork's
     "GT60 — Ride Beyond Limits" lettering is never covered. */
  .page-product .p-hero { margin-top: var(--nav-h); }

  .p-tabs { padding-block: 48px 40px; }
  .p-tabs__list, .p-tabs__list--3 { grid-template-columns: 1fr; gap: 0; margin-top: 20px; }
  .p-tab { padding: 16px 0 18px; }
  .p-tab__title { font-size: 1.0625rem; }
  .p-tab__desc { margin-top: 10px; }
  .p-tab:not(.is-active) .p-tab__desc { grid-template-rows: 0fr; margin-top: 0; }
  .p-tabs--narrow .p-tab__desc { margin-top: 10px; }
  .p-tabs--narrow .p-tab:not(.is-active) .p-tab__desc { margin-top: 0; }

  .p-storage { padding-block: 24px 64px; }
  .p-storage__grid { grid-template-columns: 1fr; }
  .p-storage__img--hook { order: 3; }
  .p-storage__text--hook { order: 4; }
  .p-storage__text, .p-storage__text--hook { padding: 24px 22px 28px; }

  .p-specs__title { padding-left: 0; }
  .p-specs__stage { width: 92%; }
  .spec-table thead td, .spec-table tbody th[scope="row"] { width: 44%; }
  .spec-table__group th { padding: 13px 14px; }
  .spec-table tbody th[scope="row"] { padding-left: 14px; padding-right: 12px; }
  .p-notes { font-size: 11px; }
}

/* ======================= ≤479 ======================= */
@media (max-width: 479px) {
  .hero__title { font-size: 2rem; }
  .feature__overlay-title { font-size: 1.75rem; }
  .p-stats { gap: 20px 12px; }
  .p-stat__value { font-size: 1.5rem; }
}

/* Hover-only affordances shouldn't stick on touch screens */
@media (hover: none) {
  .model-card:hover .model-card__img,
  .news-card:hover .news-card__media img,
  .social-card:hover { transform: none; }
}

/* ==========================================================================
   M6 page (m6.html)
   Up to 1023 px the photo sits above its text (no overlay on small screens).
   ========================================================================== */
@media (max-width: 1023px) {
  .m6s { display: flex; flex-direction: column; }
  .m6s::after { display: none; }
  .m6s__bg { aspect-ratio: 4 / 3; object-fit: cover; }
  .m6s-hero .m6s__bg { object-position: 18% 50%; }
  .m6s-led .m6s__bg { object-position: 70% 40%; }
  .m6s-ride .m6s__bg { object-position: 62% 50%; aspect-ratio: 1 / 1; }
  .m6s-storage .m6s__bg { aspect-ratio: 1920 / 780; }
  .m6s__copy, .m6s-hero__copy, .m6s-stats { position: static; transform: none !important; width: auto !important; }
  .m6s__copy, .m6s-hero__copy { padding: 30px var(--gutter) 34px; max-width: 760px; }
  .m6s-hero__copy { order: 2; padding-bottom: 8px; }
  .m6s-stats { order: 3; padding: 20px var(--gutter) 36px; gap: 22px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m6s-title { font-size: clamp(3.25rem, 14vw, 5rem); }
  .m6s-storage { color: #1c1a18; }
  .m6s-storage .m6s-h { color: #1c1a18; }
  .m6s-storage .m6s-h, .m6s-storage .m6s-p { text-shadow: none; }
  .m6s-storage .m6s-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m6s-ride .m6s-points { margin-top: 22px; }
  .m6-power__grid { grid-template-columns: 1fr; gap: 40px; max-width: 640px; }
  .m6-film__frame { aspect-ratio: 16 / 9; }
  .m6-film__video { object-position: 62% center; }
  .m6-contact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .m6-film { padding-block: 0; }
  .m6-film__frame { width: 100%; }
  .m6-contact__grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .m6s-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
}

}

/* ==========================================================================
   Owin / GFX6 product pages
   ========================================================================== */
@media (max-width: 1023px) {
  .g-feature--sky   { --stack-bg: #c7d3e8; --stack-ink: #2b2b2b; }
  .g-feature--ice   { --stack-bg: #e3ecf8; --stack-ink: #2b2b2b; }
  .g-feature--dark  { --stack-bg: #0b0605; }
  .g-feature--black { --stack-bg: #050303; }
  .g-eyebrow { font-size: clamp(1.375rem, 1rem + 1.6vw, 1.75rem); }
  .g-feature .p-feature__text, .g-feature .p-feature__text--light { color: var(--stack-ink, #fff); }
  .g-feature--sky .p-feature__desc, .g-feature--ice .p-feature__desc { color: #4a4f57; }
  .g-feature .p-feature__text--light .p-feature__desc, .g-feature .p-feature__text--light .p-feature__title { color: #fff; }
  .g-feature .p-stat__label { font-size: var(--fs-xs); }
  .p-stats--col { gap: 24px 20px; }
  .g-dl { font-size: var(--fs-sm); }
  .g-herostats { position: static; width: auto; padding: 22px var(--gutter) 28px; background: #0b0605; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .g-herostats .p-stat__value { font-size: 1.75rem; }
  .g-herostats .p-stat__label { font-size: var(--fs-xs); }
  .g-hero { background: #0b0605; }
  .g-tabs .p-tabs__media, .g-tabs--4 .p-tabs__list, .g-tabs--2 .p-tabs__list, .g-tabs--3 .p-tabs__list { width: calc(100% - 2 * var(--gutter)); }
  .p-tabs__list--4 { grid-template-columns: 1fr; }
  .g-tabs--4 .p-tab__title, .g-tabs--2 .p-tab__title { font-size: 1.0625rem; }
  .g-tabs--2 .p-tab__desc > span { font-size: var(--fs-sm); }
  .g-tabs--2 .p-tab:not(.is-active) .p-tab__desc, .g-tabs--3 .p-tab:not(.is-active) .p-tab__desc { margin-top: 0; }
  .page-model .p-storage__img, .page-model .p-storage__text { order: var(--o, 0); }
  .page-model .p-hero { margin-top: 0; }
}