/* ==========================================================================
   Chepstow OMODA JAECOO – tablet.css
   Tablet breakpoint overrides only (min-width: 768px)
   Base/mobile styles in style.css. Desktop overrides in desktop.css.
   Organised by page section: Global → Homepage → Inner Pages
   ========================================================================== */

@media (min-width: 768px) {

  /* ==========================================================================
     GLOBAL
     ========================================================================== */

  .oj-section { padding: 4.5rem 0; }
  .oj-section-heading { margin-bottom: 2.5rem; }
  .section-pad { padding: 4rem 0; }

  .oj-header__brand img {
    height: 18px;
  }



  /* ==========================================================================
     HOMEPAGE — Hero
     ========================================================================== */

  .oj-front-hero { min-height: max(440px, 65vh); }
  .oj-front-hero__title { max-width: 28ch; }

  /* Hero Slideshow: taller at tablet */
  .view-landing-hero-slideshow .vvjs-item-inner { height: 67vh; }
  .view-landing-hero-slideshow .landing-hero__overlay-text { max-width: 800px; }

  /* Icon stack: slightly larger squares at tablet */
  #block-chepstow-omoda-quicklinks a { width: 58px; height: 58px; }
  #block-chepstow-omoda-quicklinks img { width: 28px; }


  /* ==========================================================================
     HOMEPAGE — Brand Intro
     ========================================================================== */

  #block-chepstow-omoda-frontpagebrandintro { padding: 5rem 2rem; }
  .oj-bio__body { text-align: center; }


  /* ==========================================================================
     HOMEPAGE — Vehicles (landing-vehicle sections)
     ========================================================================== */

     .view-landing-vehicles .view-content {
      padding: 0 1.5rem;
   }
  /* Vehicle title padding at tablet */
  .landing-vehicle__title-wrap { padding: 2.5rem 2rem 2rem; }
  .landing-vehicle__copy { padding: 0 1rem 2.5rem; }

  /* Image collage: 2-column grid — main spans full width top, side+detail below */
  .landing-vehicle__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .landing-vehicle__image--main   { grid-column: 1 / 3; grid-row: 1; aspect-ratio: 16 / 8; }
  .landing-vehicle__image--side   { grid-column: 1;     grid-row: 2; aspect-ratio: 3 / 2; }
  .landing-vehicle__image--detail { grid-column: 2;     grid-row: 2; aspect-ratio: 3 / 2; }
  .landing-vehicle__image--extra  { display: none; }

  /* Content row: side-by-side at tablet — copy left, companion right */
  .landing-vehicle__content-row {
    flex-direction: row;
  }
  .landing-vehicle__copy {
    flex: 0 0 40%;
  }
  .landing-vehicle__companion {
    flex: 1 1 60%;
  }
  
  .landing-vehicle__companion img {
    aspect-ratio: unset;
    height: 100%;
    max-height: 400px;
    object-position: 20% center;
  }

  /* Even vehicles at tablet: companion left, copy right */
  .views-row:nth-child(even) .landing-vehicle__content-row { flex-direction: row-reverse; }

  /* Spec strip: auto-fill at tablet */
  .landing-vehicle__specs { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

  /* ==========================================================================
     HOMEPAGE — Vehicles (legacy oj-fvs / showcase — kept for compatibility)
     ========================================================================== */

  /* Older oj-fvs vehicle section */
  .oj-fvs__media { aspect-ratio: 21 / 9; }

  .oj-fvs__specs { grid-template-columns: repeat(3, 1fr); }
  .oj-fvs__spec-item { border-right: 1px solid rgba(255,255,255,0.08); border-bottom: none; }
  .oj-fvs__spec-item:nth-child(even) { border-right: 1px solid rgba(255,255,255,0.08); }
  .oj-fvs__spec-item:nth-child(3n) { border-right: none; }

  /* Showcase collage — title bar */
  .oj-showcase-title-wrap { padding: 3.5rem 2rem 2.5rem; }

  /* Collage: side + detail side by side */
  .oj-showcase-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
  }

  /* main spans full width on tablet */
  .oj-showcase-image--main {
    grid-column: 1 / 3;
    grid-row: 1;
    aspect-ratio: 16 / 7;
  }

  /* side and detail side by side */
  .oj-showcase-image--side   { grid-column: 1; grid-row: 2; aspect-ratio: 3 / 2; }
  .oj-showcase-image--detail { grid-column: 2; grid-row: 2; aspect-ratio: 3 / 2; }

  /* copy and interior side by side */
  .oj-showcase-copy            { grid-column: 1; grid-row: 3; }
  .oj-showcase-image--interior { grid-column: 2; grid-row: 3; aspect-ratio: unset; min-height: 280px; }

  /* Spec strip: auto-fill on tablet */
  .oj-showcase-specs { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .oj-showcase-spec-item:nth-child(even) { border-right: 1px solid rgba(255,255,255,0.08); }


  /* ==========================================================================
     HOMEPAGE — Test Drive Form
     ========================================================================== */

  .oj-front-test-drive { padding: 4rem 2rem; }

  /* Test drive section wrapper: wider padding at tablet */
  #block-chepstow-omoda-promoarrangeatestdrive { padding: 5rem 1rem 2rem; }
  #block-chepstow-omoda-testdrivewebformblock { padding: 0.5rem 2.5rem 5rem; }

  /* Two-column name fields at tablet */
  .oj-test-drive-form--front.webform-submission-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
  }
  .oj-test-drive-form--front.webform-submission-form > .js-form-item-vehicle-interested,
  .oj-test-drive-form--front.webform-submission-form > .js-form-item-email,
  .oj-test-drive-form--front.webform-submission-form > .js-form-item-telephone,
  .oj-test-drive-form--front.webform-submission-form > .js-form-item-message,
  .oj-test-drive-form--front.webform-submission-form > .webform-actions,
  .oj-test-drive-form--front.webform-submission-form > .form-actions { grid-column: 1 / -1; }
  .oj-test-drive-form--front .webform-actions,
  .oj-test-drive-form--front .form-actions { justify-content: flex-end; }
  .oj-test-drive-form--front .webform-button--submit,
  .oj-test-drive-form--front input[type="submit"] { width: auto; min-width: 220px; }


  /* ==========================================================================
     HOMEPAGE — Lower Section
     ========================================================================== */

  /* Promo cards: 3 across at 768px+ */
  .oj-front-promo-row__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }

  .oj-front-promo-row .region-front-promo {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    width: 100%;
    --bs-gutter-x: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .oj-front-promo-row .region-front-promo > .block { flex: 1 1 0; }

  /* Info row: 2-column at 768px (nav+business | map+newsletter) */
  .oj-front-info-row__inner { flex-direction: row; flex-wrap: wrap; gap: 2rem 3rem; }

  .oj-front-info-row .region-front-contact-strip {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem 3rem;
    width: 100%;
    --bs-gutter-x: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .oj-front-info-row .region-front-contact-strip > .block { flex: 1 1 200px; }

  /* Legal bar: horizontal at tablet+ */
  .oj-front-legal__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }


  /* ==========================================================================
     INNER PAGES — Shared
     ========================================================================== */

  .oj-hero__ctas { flex-direction: row; }
  .oj-brand-intro__inner { gap: 2.5rem; }
  .oj-inner-hero { padding: 7rem 1.5rem 4rem; }
  .oj-contact-strip__grid { grid-template-columns: repeat(2, 1fr); }


  /* ==========================================================================
     INNER PAGES — Vehicle
     ========================================================================== */

  .oj-spec-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .oj-spec-item { padding: 1.75rem 1.5rem; }
  .oj-spec-item__value { font-size: 1rem; }
  .oj-spec-item__label { font-size: 0.7rem; }

  .oj-features-body ul { grid-template-columns: repeat(2, 1fr); }
  .oj-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

  .oj-vehicle-hero { min-height: 65vh; }
  .oj-vehicle-hero__content { padding: 4rem 0 3rem; }
  .oj-vehicle-hero__ctas { flex-direction: row; }


  /* ==========================================================================
     INNER PAGES — News
     ========================================================================== */

  .oj-news-hero { height: 50vh; }
  .oj-news-article { padding: 4rem 0 5rem; }


  /* ==========================================================================
     INNER PAGES — Contact
     ========================================================================== */

  .oj-map-placeholder { min-height: 360px; margin-top: 0; }
  .oj-map-embed iframe { height: 400px; }


  /* ==========================================================================
     INNER PAGES — Test Drive Page
     ========================================================================== */

  .oj-webform-wrapper { padding: 2rem; }
  .oj-test-drive-sidebar { margin-top: 0; padding: 1.75rem; }


  /* ==========================================================================
     INNER PAGES — Footer
     ========================================================================== */

     .oj-footer { padding: 3rem 1.5rem; }

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

  /* Newsletter bar: side by side */
  .oj-footer__nl-inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .oj-footer__nl-social,
  .oj-footer__nl-form { width: 48%; }

  #webform-submission-newsletter-subscription-block-content-17-add-form #edit-actions--3 {
    margin-bottom: 0 !important;
  }

  #block-chepstow-omoda-footernewsletterandsocialicons .form-item-your-e-mail-address,
#block-chepstow-omoda-footernewsletterandsocialicons #edit-footer-subscription-header {
  margin: 0 !important;
}

  /* TEST DRIVE COUNTRY SELECTOR — stays column at all sizes, max-width set in style.css */

}