// =============================================================================
// IMAGE-AND-CONTENT — Task #18 (v2, was promo-split)
// Left image flush to page edge (rounded right corners) + right text column.
// Mobile-first: base = 375px, desktop via respond-to('desktop')
// Measurements: design/measurements-v2.json → "image-and-content"
//   Web:    image 710×878 flush left, right corners radius 4px; gap 120px;
//           content 489px; section py-80, bg pampas
//   Mobile: image 400px tall slider container (full-width); content stacked
//           below px-16, pt-32; section py-56
// =============================================================================

@import '../mixins';

.image-and-content {
  // Section rhythm (padding-block) split from horizontal inset, which stays
  // tied to the 1440px layout breakpoint below — that's where the image
  // switches to bleeding flush against the left edge, so padding-inline
  // can't move to 992px without the image bleeding early.
  padding-block: var(--section-space);
  padding-inline: var(--space-4); // mobile: px-16
  overflow: hidden;

  // ── Image area ──────────────────────────────────────────────────────────
  &__image-col {
    width: 100%;
    height: 400px;                         // mobile: 400px tall, inset px-16 (no bleed)
    overflow: hidden;
    position: relative;
  }

  &__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;                      // mobile: no rounding
  }

  // Mobile slider dots/nav within image area (Swiper handles placement)
  &__image-slider {
    width: 100%;
    height: 100%;
    position: relative;
  }

  // Pagination dots — used by slider-variant instances (e.g. Dining section)
  // Figma 18512:8548 (desktop) / 18512:8941 (mobile) — identical at both breakpoints:
  // 11px dots, 7px edge-to-edge gap. Colors confirmed exact pixel match already
  // (#dab050 active / #ffffff inactive, fully opaque) — no color change needed.
  &__pagination {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 0;

    .swiper-pagination-bullet {
      width: 11px;
      height: 11px;
      border-radius: var(--radius-full);
      background-color: var(--color-white);
      opacity: 1;
      // Swiper's own bundled CSS sets margin:0 4px on this same selector at
      // equal specificity, winning the cascade by load order and stacking
      // an extra 4px+4px on top of this container's own 7px flex gap (15px
      // total instead of 7px) — !important forces our margin:0 to actually
      // win, matching this codebase's existing convention for overriding
      // third-party framework defaults (see _buttons.scss).
      margin: 0 !important;
      cursor: pointer;
      transition: opacity 0.2s ease, background-color 0.2s ease;
    }

    .swiper-pagination-bullet-active {
      background-color: var(--color-gold);
      opacity: 1;
    }
  }

  // ── Content column ───────────────────────────────────────────────────────
  // Figma 18580:10880 (mobile, supersedes 18512:8945) — padding-top 40px
  // below image; the flat 24px gap below covers title-group -> 2nd paragraph
  // -> T&Cs -> button ("everything else" rhythm); title -> 1st paragraph is
  // its own 32px exception, added via the &__title + &__body margin below.
  &__content {
    padding-top: 40px;                     // mobile: pt-40 below image
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;                             // content column gap-24
  }

  &__title {
    font-family: var(--font-display);
    font-size: var(--fs-display-sm);       // 30px mobile
    font-weight: 400;
    line-height: var(--lh-display-sm);
    letter-spacing: 0;
    color: var(--color-gold-dark);
    margin: 0;
  }

  // title -> first paragraph is 32px (Figma 18580:10880), not the flat 24px
  // __content gap used for every other pair in this stack — same
  // adjacent-sibling margin technique as &__eyebrow + &__title below.
  &__title + &__body {
    margin-top: calc(var(--gap-title-body-mobile) - 24px); // 32px - 24px = +8px
  }

  // __content's own flex `gap` (24px) is uniform across every child pair —
  // fine for title→body and body→button, but every other eyebrow+title
  // pairing in this codebase (content-only-intro, newsletter-form,
  // tab-component-2, gallery, testimonials) uses a visibly tighter,
  // dedicated gap (8–16px), never the same spacing as body-copy. This was
  // the one component still using the flat 24px for that pair. Same
  // adjacent-sibling negative-margin technique as .info-card-feature +
  // .info-card-feature (_info-card.scss): nets 24px (gap) - 8px (margin) =
  // 16px, matching --gap-eyebrow-title — the same token content-only-intro
  // uses for this exact relationship.
  &__eyebrow + &__title {
    margin-top: calc(var(--gap-eyebrow-title) - 24px); // 16px - 24px = -8px
  }

  &__body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-paragraph-mobile);      // 32px mobile (Figma 18580:10880)

    p {
      @include body-text;
      margin: 0;
    }
  }

  &__eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: var(--lh-lg-tight);
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0;
  }

  &__tcs {
    font-family: var(--font-body);
    font-size: var(--fs-sm);              // 14px
    color: var(--color-text-primary);
    text-decoration: underline;
    text-underline-offset: 2px;

    &:hover {
      color: var(--color-gold-dark);
    }
  }

  // ── Desktop ──────────────────────────────────────────────────────────────
  @include respond-to('desktop') {
    padding-inline: 0;                    // no side padding (image bleeds left)
    display: flex;
    align-items: stretch;
    flex-direction: row;
    overflow: visible;
    // image(710) + content's own max-width (489+120+120=729) = 1439px, i.e.
    // this row's design width already matches --container-outer (1440px).
    // Without a cap, __content's flex:1 stops growing at that same 729px
    // ceiling but the row itself has no upper bound — on viewports wider
    // than ~1440px (1920/2560/3840/4K) all the extra space piles up as a
    // lopsided void to the right of __content instead of being distributed.
    // Centering the whole row here turns that into a balanced gutter on
    // both sides beyond 1440px; at/below 1440px (this breakpoint's own
    // floor) margin-inline:auto resolves to 0, so nothing changes there —
    // the image stays exactly as flush-left as before.
    max-width: var(--container-outer);
    margin-inline: auto;

    // Beyond 1920px, step up to match .container's own xxxl tier
    // (main.scss's $container-max-widths) — same site-wide framing/gutter
    // instead of staying frozen at 1440px all the way to 4K.
    @include respond-to('wide') {
      max-width: 1800px;
    }

    &__image-col {
      width: 710px;
      height: auto;                        // stretches to match __content's height (row align-items:stretch)
      flex-shrink: 0;
      margin-inline: 0;                   // no bleed on desktop
    }

    &__image {
      height: 100%;
      // Right corners only rounded (top-right + bottom-right)
      border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    }

    &__image-slider {
      height: 100%;
    }

    &__content {
      flex: 1;
      padding-top: 0;                     // vertically centered via align-items:stretch + justify-content:center
      padding-left: 120px;                // gap between image and content
      padding-right: var(--space-30);     // 120px right side
      justify-content: center;
      gap: 24px;
      max-width: calc(489px + 120px + var(--space-30));
    }

    &__title {
      font-size: var(--fs-display-lg);   // 48px desktop
      line-height: var(--lh-display-lg);
      letter-spacing: -0.96px;
      margin-bottom: 8px;  // + 24px __content gap = 32px title→body (desktop-only exception, per earlier explicit request)
    }

    // Cancel the mobile-only title->body +8px margin (calc(var(--gap-title-body-mobile) - 24px))
    // — desktop has its own +8px exception above (&__title margin-bottom), so without this reset
    // the two would stack (24 + 8 + 8 = 40px instead of the intended 32px).
    &__title + &__body {
      margin-top: 0;
    }

    &__eyebrow {
      font-size: var(--fs-xl);            // 20px desktop
      line-height: var(--lh-xl);
    }

    &__body {
      gap: 48px;                          // desktop: 48px between paragraphs
    }
  }
}

// ── Reversed variant: image right, content left ─────────────────────────────
.image-and-content--reversed {
  @include respond-to('desktop') {
    flex-direction: row-reverse;

    .image-and-content__image {
      border-radius: var(--radius-xs) 0 0 var(--radius-xs);
    }

    .image-and-content__content {
      padding-left: var(--space-30);
      padding-right: 120px;
    }
  }
}

// ── "Layout 1" = show the whole image, uncropped (floor plans, diagrams) ────
// Opt-in per element from the backend: Appearance → Layout → Layout 1. No new
// field — TYPO3's core `layout` value is already emitted as .frame-layout-N on
// every CE wrapper (Layouts/ContentBlocks/Default.html), so this costs no
// config/TCA/DB change and leaves every other instance untouched.
//
// Deliberately the ONLY difference from layout 0: same image-col box, same
// size, same position at every breakpoint — just object-fit: contain instead
// of cover, so the image is letterboxed/pillarboxed inside that unchanged box
// rather than cropped to fill it. Both wrapper classes are required —
// .image-and-content__* is reused by the timeline component, and
// image-slider-banner already gives layout 1 its own meaning ("Drawer
// Gallery") — so the single class alone would collide.
.frame-type-sflg_imageandcontent.frame-layout-1 .image-and-content__image {
  object-fit: contain;
}