/*
 * Masuria Esport - "Co oferujemy?" section (assets/css/sections/offer.css)
 * Markup: template-parts/sections/offer.php. Requires tokens.css, base.css, components.css (.msr-container, .msr-section-title, .msr-icon).
 * Design (1440 px): 856 px tall (128 + 600 + 128), two 584 px columns with an 80 px gap, vertically centred against each other.
 * Left: the desaturated 584 x 600 photo (2px radius) with a 292 x 172 gold badge that overlaps its bottom-right corner by 24px.
 * Right: the title, then four rows of a 48px gold-alpha icon box + 20px title + 14px dimmed text (32px between rows, 24px icon gap).
 * Anything marked "ADDED: not in design" is a responsive / robustness extra that does not change the 1440 px look.
 */

/* ==========================================================================
   Section
   ========================================================================== */

.msr-offer {
  --msr-offer-overhang: min(24px, calc(var(--msr-gutter) - 8px)); /* badge overhang: 24px in the design; ADDED: not in design - capped so it never leaves the viewport on small screens */

  position: relative;
  padding-block: var(--msr-section-py-fluid); /* 128 at >= 1440 */
  background-color: var(--msr-bg);
}

.msr-offer__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 584 + 584 in the 1248px container */
  column-gap: clamp(40px, 5.5556vw, var(--msr-gap-xl)); /* 80 at >= 1440; ADDED: not in design - narrower below */
  align-items: center;
}

/* ==========================================================================
   Media: photo box 584 x 600 (overflow visible so the badge can protrude)
   ========================================================================== */

.msr-offer__media {
  position: relative;
  aspect-ratio: 584 / 600;
}

.msr-offer__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--msr-radius-sm); /* 2px */
  background-color: var(--msr-surface); /* ADDED: not in design - shows while the photo loads / when no photo is set */
  isolation: isolate; /* keeps the blend layer below inside the photo box */
}

.msr-offer__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover; /* the 1024 x 1024 source, centred: 8px cropped left and right */
  object-position: 50% 50%;
}

/*
 * Desaturation as in Figma: a full-cover white layer with mix-blend-mode: saturation.
 * It gives Rec.601 luma (0.30 / 0.59 / 0.11), which matches the reference to within 1 grey level;
 * filter: grayscale(1) uses Rec.709 weights and comes out about 2.5 levels brighter on this teal-blue photo.
 */
.msr-offer__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--msr-white);
  mix-blend-mode: saturation;
  pointer-events: none;
}

/* ---- Gold badge: 292 x 172 (48px padding), sticks out 24px right and bottom ---- */

.msr-offer__badge {
  position: absolute;
  right: calc(-1 * var(--msr-offer-overhang));
  bottom: calc(-1 * var(--msr-offer-overhang));
  z-index: var(--msr-z-raised);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--msr-space-48);
  background-color: var(--msr-gold);
  color: var(--msr-on-gold);
}

/* "01": Barlow Condensed 900 italic 60/60 (Figma tracking -0.41px = -0.0068em) */
.msr-offer__badge-number {
  font-family: var(--msr-font-heading);
  font-size: var(--msr-fs-60);
  font-style: italic;
  font-weight: var(--msr-fw-black);
  line-height: var(--msr-lh-none);
  letter-spacing: -0.0068em;
  white-space: nowrap;
}

/*
 * Caption: Inter 700 12/16, 0.1em, capitals. The design's badge is 292.3px wide (48 + a 196.3px Figma text box + 48) although the
 * real glyphs are only 183.4px wide (the screenshot shows the wide badge), so the label keeps that box width at desktop size.
 */
.msr-offer__badge-label {
  min-width: 16.36em; /* 196.3 / 12 */
  font-family: var(--msr-font-body);
  font-size: var(--msr-fs-12);
  font-weight: var(--msr-fw-bold);
  line-height: var(--msr-lh-16);
  letter-spacing: var(--msr-ls-wider);
  text-transform: uppercase;
}

/* ==========================================================================
   Content: title + list, 32px apart
   ========================================================================== */

.msr-offer__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--msr-gap-md); /* 32 */
}

.msr-offer__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--msr-gap-md); /* 32 */
  width: 100%;
}

.msr-offer__item {
  display: flex;
  align-items: flex-start;
  gap: var(--msr-gap-sm); /* 24 */
  width: 100%;
}

/* Icon box: 48 x 48, gold at 10% with a 1px gold-30% border, square; the 16px icon sits centred */
.msr-offer__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--msr-border-gold);
  background-color: var(--msr-gold-10);
}

/* The exported SVGs carry their exact size (three are 16 x 16, the bolt is 14 x 16): fixed height, width follows the file */
.msr-offer__icon-img {
  width: auto;
  height: 16px;
}

/* Text column: 512px at 1440 (584 - 48 - 24), 4px between title and text */
.msr-offer__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--msr-space-4);
  min-width: 0;
}

.msr-offer__item-title {
  color: var(--msr-white);
  font-size: var(--msr-fs-20);
  line-height: var(--msr-lh-28);
  text-transform: uppercase; /* ADDED: not in design - the design copy is typed in capitals; keeps CMS-edited text consistent */
}

/*
 * Inter 400 14/20 at 50% white. Balanced wrapping reproduces the design's line breaks of rows 1, 3 and 4 in the 512px column
 * (greedy wrapping would put "która" at the end of row 4's first line) and reflows naturally at other widths; row 2 is special, see below.
 */
.msr-offer__item-text {
  color: var(--msr-white-50);
  font-size: var(--msr-fs-14);
  line-height: var(--msr-lh-20);
  text-wrap: balance;
}

/*
 * Second row: balancing would move "nam," to the next line, so this paragraph wraps greedily in a narrower measure instead.
 * The Figma box is 418px, but its first line ("... Powiedz nam,") measures 419.0px in the real Inter and the second line plus
 * "najlepsze" 426.9px: 30.15em = 422px sits in the middle of that window and gives the design's three lines.
 */
.msr-offer__item:nth-child(2) .msr-offer__item-text {
  max-width: 30.15em;
  text-wrap: wrap;
}

/* ==========================================================================
   Responsive (ADDED: not in design) - 1440 px pixels above are unchanged
   ========================================================================== */

@media (max-width: 1200px) {
  /* Narrower photo: a slightly more compact badge (the design's 292 x 172 covers too much of a 450px photo) */
  .msr-offer__badge {
    padding: var(--msr-space-40);
  }

  .msr-offer__badge-number {
    font-size: var(--msr-fs-48);
  }

  .msr-offer__badge-label {
    min-width: 0;
  }
}

@media (max-width: 1024px) {
  /* Stack: photo on top (wide crop), badge overhang kept, content below */
  .msr-offer__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--msr-space-64);
  }

  .msr-offer__media {
    margin-bottom: var(--msr-offer-overhang); /* room for the part of the badge below the photo */
    aspect-ratio: 16 / 10;
  }

  .msr-offer__item:nth-child(2) .msr-offer__item-text {
    max-width: none;
    text-wrap: balance;
  }
}

@media (max-width: 600px) {
  .msr-offer__media {
    aspect-ratio: 4 / 3;
  }

  .msr-offer__badge {
    padding: var(--msr-space-24) var(--msr-space-32);
  }

  .msr-offer__badge-number {
    font-size: 2.5rem; /* 40 */
  }
}

@media (max-width: 480px) {
  .msr-offer__media {
    aspect-ratio: 1 / 1;
  }

  .msr-offer__inner {
    row-gap: var(--msr-space-48);
  }

  .msr-offer__item {
    gap: var(--msr-space-16);
  }
}