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

@media (min-width: 992px) {

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

  .oj-section { padding: 5rem 0; }
  .oj-section-heading { margin-bottom: 3rem; }
  .section-pad { padding: 5rem 0; }


  /* ==========================================================================
     HOMEPAGE — Navigation
     ========================================================================== */

  /* Hide mobile toggle, show inline nav row */
  .oj-header__toggle { display: none; }

  /* Reorder: nav LEFT (order:1), logo RIGHT (order:2) to match design */
  .oj-header__inner > nav.oj-header__nav { order: 1; }
  .oj-header__brand { order: 2; }

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

  .oj-header__toggle svg {
    width: 32px;   /* change size here */
    height: 32px;
    stroke-width: 2.5;  /* thicker lines */
  }

  /* The Drupal block-menu wrapper must not break the inner flex row */
  .oj-header__nav .block-menu {
    display: flex;
    align-items: center;
  }

  .oj-header__nav {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: transparent;
    padding: 0;
    gap: 2rem;
    align-items: center;
    list-style: none;
    margin: 0;
  }

  .oj-header__nav a {
    padding: 0.2rem 0;
    font-size: 1rem;
    letter-spacing: 0.13em;
    border-bottom: 2px solid transparent;
    border-top: none;
    display: inline;
  }

  .oj-header__nav li {
    padding: 0 1.3rem 0 0;
  }

  .oj-header__nav a:hover,
  .oj-header__nav a.is-active {
    color: var(--oj-blue);
    border-bottom-color: var(--oj-blue);
  }

  /* Footer nav column: keep vertical in dark footer */
  .oj-footer .oj-header__nav {
    flex-direction: column !important;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    gap: 0.5rem !important;
  }


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

  /* Cinematic height on desktop */
  .oj-front-hero {
    min-height: max(520px, 72vh);
    align-items: flex-end;
  }

  .oj-front-hero__content { padding: 0 2.5rem 6rem; }

  .oj-front-hero__title {
    font-size: clamp(2.25rem, 3.5vw, 3.5rem);
    max-width: 30ch;
  }

  /* Hero Slideshow: cinematic height on desktop */
  .view-landing-hero-slideshow .vvjs-item-inner { height: 80vh; }
  .view-landing-hero-slideshow .landing-hero__overlay-text { 
    top: 14%; 
    max-width: 990px;
  }

  /* Slide image: fills container with cover crop */
  .view-landing-hero-slideshow .vvjs-item-inner > img {
    object-position: center 5%;
  }

  /* Icon stack: design-spec size at desktop */
  #block-chepstow-omoda-quicklinks a { width: 64px; height: 64px; }
  #block-chepstow-omoda-quicklinks img { width: 30px; }

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

  #block-chepstow-omoda-frontpagebrandintro { padding: 4rem 2rem; }
  .oj-bio__body { text-align: center; font-size: 1rem; }
  .oj-bio__logo { height: 56px; }


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

  /* Desktop: stacked layout with 4 sections.
     1. Title bar  — full width
     2. Image collage — 2-column grid: main (60%) + side/detail stack (40%)
     3. Content row — copy block (55%) + companion image (45%)
     4. Spec strip  — full width
     Even rows (.landing-vehicle--reversed) flip the collage and content row. */
     .view-landing-vehicles .view-content {
      margin: 0;
      padding: 0 2.5rem;
  }

  .landing-vehicle {
    display: block;
    overflow: hidden;
  }

  .landing-vehicle__title-wrap {
    padding: 4rem 3rem 3rem;
  }

  .landing-vehicle__title {
    font-size: clamp(2rem, 3.5vw, 3rem);
    letter-spacing: 0.06em;
  }

  /* Image collage: 2-column internal grid — main tall left, side+detail stacked right */
  .landing-vehicle__images {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: 1fr 1fr;
    gap: 2.5rem;
    min-height: 520px;
  }

  .views-row:nth-child(even) .landing-vehicle__images {
    grid-template-columns: 40% 60%;
  }

  .landing-vehicle__image--main {
    grid-column: 1;
    grid-row: 1 / 3;
    aspect-ratio: unset;
  }
  .landing-vehicle__image--side {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: unset;
  }
  .landing-vehicle__image--detail {
    grid-column: 2;
    grid-row: 2;
    aspect-ratio: unset;
  }
  .landing-vehicle__image--extra { display: none; }

  /* Even vehicles: flip image collage — main moves to right column */
  .views-row:nth-child(even) .landing-vehicle__image--main   { grid-column: 2; grid-row: 1 / 3; }
  .views-row:nth-child(even) .landing-vehicle__image--side   { grid-column: 1; grid-row: 1; }
  .views-row:nth-child(even) .landing-vehicle__image--detail { grid-column: 1; grid-row: 2; }

  .views-row .landing-vehicle__image--detail {
    width: 100%;
  }

  .views-row:nth-child(odd) .landing-vehicle__image--detail img {
    max-width: 80%;
    float: left;
  }

  .views-row:nth-child(even) .landing-vehicle__image--detail img {
    max-width: 80%;
    float: right;
  }

  /* Content row: copy + companion image side by side */
 

  .views-row:nth-child(even) .landing-vehicle__image--detail  .landing-vehicle__copy {
    grid-column: 1;
    padding: 3.5rem 3rem 3.5rem 0;
    justify-content: center;
  }

  .views-row .landing-vehicle__content-row {
    margin-top: 4rem;
}

  .landing-vehicle__companion {
    grid-column: 2;
  }
  .landing-vehicle__companion img {
    aspect-ratio: 16/9;
    height: 100%;
    width: 100%;
    max-height: unset;
    object-position: center center;
  }

  /* Content row: copy block + companion image — mobile: stacked */
  .landing-vehicle__content-row {
    max-height: unset;
    align-items: flex-start;
  }

  .landing-vehicle__copy {
    flex: 0 0 45%;
  }
  .landing-vehicle__companion {
    flex: 1 1 55%;
  }

  /* Even vehicles: flip content row — companion left, copy right */
  .views-row:nth-child(even) .landing-vehicle__copy      { grid-column: 2; }
  .views-row:nth-child(even) .landing-vehicle__companion { grid-column: 1; }

  .landing-vehicle__tagline { font-size: clamp(1.4rem, 2.2vw, 3rem); line-height: 1.3; }
  .landing-vehicle__description { font-size: 1.25rem; line-height: 1.95; }
  .landing-vehicle__hl-heading {
    font-size: 1rem;
}
  .landing-vehicle__hl-list li { font-size: 1.1rem; }

  /* Specs: full-width row with all specs on one line */
  .landing-vehicle__specs {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .landing-vehicle__spec {
    padding: 2rem 1.5rem;
    border-bottom: none;
    text-align: center;
    align-items:  center;
  }

  .landing-vehicle__spec:last-child { border-right: none; }
  .landing-vehicle__spec-icon { font-size: 1.5rem; }
  .landing-vehicle__spec-label { font-size: 0.7rem; }
  .landing-vehicle__spec-value { font-size: 1.1rem; }

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

  /* Older oj-fvs vehicle section — 2-column body */
  .oj-fvs__header { padding: 3rem 2rem 2rem; }
  .oj-fvs__title { font-size: clamp(2rem, 3vw, 3rem); }

  .oj-fvs__body {
    flex-direction: row;
    align-items: stretch;
    min-height: 460px;
  }

  /* Default (odd): image LEFT, content RIGHT */
  .oj-fvs__media {
    flex: 0 0 58%;
    width: 58%;
    aspect-ratio: unset;
    height: auto;
    min-height: 420px;
  }

  .oj-fvs__content {
    flex: 0 0 42%;
    width: 42%;
    padding: 3rem 2.5rem;
    justify-content: center;
    background: rgba(0,0,0,0.18);
  }

  /* Reversed (even): content LEFT, image RIGHT */
  .oj-fvs--reverse .oj-fvs__body { flex-direction: row-reverse; }

  .oj-fvs__tagline { font-size: clamp(1.35rem, 2.5vw, 1.9rem); }
  .oj-fvs__overview { font-size: 0.95rem; }

  /* Specs: all on one row */
  .oj-fvs__specs {
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  .oj-fvs__specs.oj-fvs__specs--four { grid-template-columns: repeat(4, 1fr); }

  .oj-fvs__spec-item {
    border-right: 1px solid rgba(255,255,255,0.08);
    border-bottom: none;
    padding: 1.5rem 1.25rem;
  }

  .oj-fvs__spec-item:last-child { border-right: none; }
  .oj-fvs__spec-item:nth-child(even) { border-right: 1px solid rgba(255,255,255,0.08); }
  .oj-fvs__spec-label { font-size: 0.65rem; }
  .oj-fvs__spec-value { font-size: 0.9rem; }

  /* Showcase collage — decorative shape */
  .oj-showcase-shape {
    width: 540px;
    height: 540px;
    top: -100px;
    right: -120px;
  }

  /* Title bar */
  .oj-showcase-title-wrap { padding: 4.5rem 3rem 3rem; }
  .oj-showcase-title { letter-spacing: 0.08em; }

  /*
   * Desktop collage grid — 3 explicit rows:
   *   Row 1+2: main (tall) — side (row 1) + detail (row 2)
   *   Row 3:   copy — interior
   * 2 columns: 58% / 42%
   *
   * collage_left:  main left, side/detail right, copy left, interior right
   * collage_right: main right, side/detail left, interior left, copy right
   */
  .oj-showcase-collage {
    display: grid;
    grid-template-columns: 58% 42%;
    grid-template-rows: 330px 330px auto;
    gap: 0;
  }

  /* ── collage_left (default) ── */
  .oj-showcase-section--collage_left .oj-showcase-image--main,
  .oj-showcase-section--wide_split  .oj-showcase-image--main {
    grid-column: 1;
    grid-row: 1 / 3;
    aspect-ratio: unset;
    height: 100%;
  }

  .oj-showcase-section--collage_left .oj-showcase-image--side,
  .oj-showcase-section--wide_split  .oj-showcase-image--side {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: unset;
    height: 100%;
  }

  .oj-showcase-section--collage_left .oj-showcase-image--detail,
  .oj-showcase-section--wide_split  .oj-showcase-image--detail {
    grid-column: 2;
    grid-row: 2;
    aspect-ratio: unset;
    height: 100%;
  }

  .oj-showcase-section--collage_left .oj-showcase-copy,
  .oj-showcase-section--wide_split  .oj-showcase-copy {
    grid-column: 1;
    grid-row: 3;
  }

  .oj-showcase-section--collage_left .oj-showcase-image--interior,
  .oj-showcase-section--wide_split  .oj-showcase-image--interior {
    grid-column: 2;
    grid-row: 3;
    aspect-ratio: unset;
    min-height: 300px;
    height: 100%;
  }

  /* ── collage_right: mirrored positions ── */
  .oj-showcase-section--collage_right .oj-showcase-collage {
    grid-template-columns: 42% 58%;
  }

  .oj-showcase-section--collage_right .oj-showcase-image--main {
    grid-column: 2;
    grid-row: 1 / 3;
    aspect-ratio: unset;
    height: 100%;
  }

  .oj-showcase-section--collage_right .oj-showcase-image--side {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: unset;
    height: 100%;
  }

  .oj-showcase-section--collage_right .oj-showcase-image--detail {
    grid-column: 1;
    grid-row: 2;
    aspect-ratio: unset;
    height: 100%;
  }

  .oj-showcase-section--collage_right .oj-showcase-copy {
    grid-column: 2;
    grid-row: 3;
  }

  .oj-showcase-section--collage_right .oj-showcase-image--interior {
    grid-column: 1;
    grid-row: 3;
    aspect-ratio: unset;
    min-height: 300px;
    height: 100%;
  }

  /* Copy block desktop sizing */
  .oj-showcase-copy {
    padding: 4.5rem 3.5rem;
    justify-content: center;
  }

  .oj-showcase-tagline { font-size: clamp(1.6rem, 2.5vw, 2.3rem); }
  .oj-showcase-overview { font-size: 1.05rem; line-height: 1.95; }
  .oj-showcase-hl-list li { font-size: 1.05rem; }

  /* Spec strip: all on one row */
  .oj-showcase-specs {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    border-top: 2px solid rgba(255,255,255,0.25);
  }

  .oj-showcase-spec-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    border-right: 1px solid rgba(255,255,255,0.1);
    border-bottom: none;
    gap: 0.75rem;
  }

  .oj-showcase-spec-item:nth-child(even) { border-right: 1px solid rgba(255,255,255,0.1); }
  .oj-showcase-spec-item:last-child { border-right: none; }

  .oj-showcase-spec-icon { margin-top: 0; }
  .oj-showcase-spec-icon svg { width: 36px; height: 36px; }
  .oj-showcase-spec-label { font-size: 0.7rem; text-align: center; letter-spacing: 0.16em; }
  .oj-showcase-spec-value { font-size: 1.1rem; text-align: center; font-weight: 700; }


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

  .oj-front-test-drive { padding: 7rem 4rem; }
  .oj-ftd__title { font-size: clamp(2.25rem, 3.5vw, 3.5rem); }
  .oj-front-test-drive .region-front-test-drive { max-width: 960px; }

  /* Desktop: two-column grid inside the form */
  .oj-test-drive-form--front.webform-submission-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
  }

  /* Full-width fields */
  .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; }

  /* Submit button: right-aligned, not full-width */
  .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"],
  .oj-test-drive-form--front .form-actions input { width: auto; min-width: 260px; }


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

  /* Promo row: wider padding */
  .oj-front-promo-row { padding: 4rem 3rem 0; }

  /* Info row: 4 equal columns at desktop */
  .oj-front-info-row { padding: 3rem 3rem 2.5rem; }

  .oj-front-info-row .region-front-contact-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 3rem;
    flex-wrap: unset;
    --bs-gutter-x: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

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

  /* Legal bar padding */
  .oj-front-legal { padding: 1rem 3rem; }
  .oj-front-legal__inner { max-width: 1200px; }


  /* ==========================================================================
     HOMEPAGE — Test Drive Section (desktop)
     ========================================================================== */

  #block-chepstow-omoda-promoarrangeatestdrive { padding: 7rem 4rem 2.5rem; }
  #block-chepstow-omoda-testdrivewebformblock { padding: 0.5rem 4rem 6rem; }


  /* ==========================================================================
     HOMEPAGE — CTA Card Blocks: 3-column layout
     .row>* gives width:100% by default; override for the three cards only.
     ========================================================================== */

  .region-featured-bottom-second {
      padding: 5rem 2.5rem 2rem;
      grid-template-columns: repeat(3, 1fr);
  }

  .region-featured-bottom-second .block-content-landing_cta_card {
    width: 100%;
    border-top: none;
  }
  .region-featured-bottom-second .block-content-landing_cta_card:last-of-type {
    border-right: none;
  }

  /* Card image: taller crop at desktop */
  .block-content-landing_cta_card .field--name-field-card-image img {
    aspect-ratio: 16 / 9;
  }


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

  .oj-inner-hero { padding: 8rem 1.5rem 4rem; }

  .oj-brand-intro__inner {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .oj-cta-block__inner {
    flex-direction: row;
    text-align: left;
    align-items: center;
    justify-content: space-between;
  }
  .oj-cta-block__actions { justify-content: flex-start; }

  .oj-contact-strip__grid { grid-template-columns: repeat(4, 1fr); }


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

  .oj-vehicle-hero { min-height: 70vh; }

  .oj-vehicle-cta-strip__inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .oj-vehicle-cta-strip__item { padding: 2.5rem; }

  /* Bottom CTA strip — row layout at desktop */
  .oj-vehicle-cta-strip__actions { flex-direction: row; gap: 1rem; }


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

  .oj-news-hero { height: 55vh; min-height: 320px; }
  .oj-news-article { padding: 4rem 0 6rem; }


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

  .oj-contact-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .oj-map-embed iframe { height: 460px; }
  .oj-map-placeholder { min-height: 420px; height: 100%; }


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

  .oj-webform-wrapper { padding: 2.5rem; }
  .oj-test-drive-sidebar { padding: 2rem; height: 100%; }


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

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

  .oj-footer__top { 
    grid-template-columns: repeat(3, .2fr) .4fr;
    gap: 1.5rem; 
  }

  .oj-footer__top .region:not(:last-of-type) {
    border: none;
    border-right: .125rem solid var(--oj-dark);
  }

  .oj-footer__bottom {
    flex-direction: row;
    text-align: left;
    justify-content: space-between;
    align-items: center;
  }

  .oj-footer__legal-links {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  /* Newsletter bar */
  .oj-footer__nl-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2.5rem;
  }

  .oj-footer__nl-social { flex: 0 0 auto; }
  .oj-footer__nl-form { flex: 0 0 380px; }

}


@media (min-width: 1200px) {

  /* HOMEPAGE — Vehicles: increase padding and font sizes further at wider desktop */
  .landing-vehicle__spec {
    padding: 2rem 1.5rem;
    flex-direction: row;
    gap: 0 1rem;
  }

  .landing-vehicle__spec-icon-wrapper {
    width: auto;
  }
  
}