/* RF Image Layout widget — Reloadux Addons
 * 5-cell collage: left col (short + tall), center (full-height),
 * right col (tall + short). All sizing is proportional so the layout
 * scales to fit whatever container width it lands in — no fixed pixel
 * cell widths means it never needs `overflow-x: hidden` to handle
 * narrow viewports.
 *
 * Natural design size is 615 × 412 (desktop) and 525 × 352 (mobile).
 * `aspect-ratio` preserves the desktop ratio at any width; the only
 * mobile-specific tweak is the cell border-radius.
 */

/* ---------- Tokens (scoped) ---------- */
.rfimagelayout-root {
  /* Gaps and dimensions are expressed as % of the design's natural
     size, so they scale 1:1 when the collage shrinks. */
  --rf-gap-h: 1.139%;   /* 7px / 615 */
  --rf-gap-v: 1.699%;   /* 7px / 412 */
  --rf-col-flex: 32.52; /* 200 / (200 + 200.763 + 200) ≈ 32.52% column */
  --rf-center-flex: 32.65;
  --rf-short-h: 27.67%; /* 114 / 412 */
  --rf-tall-h: 70.63%;  /* 291 / 412 */

  --rf-cell-radius: 16px;
  --rf-center-position-x: 62%;

  --rf-natural-w: 615px;

  width: 100%;
}

/* ---------- Box-sizing reset for our subtree only ---------- */
.rfimagelayout-root *,
.rfimagelayout-root *::before,
.rfimagelayout-root *::after {
  box-sizing: border-box;
}

/* ---------- Image layout ----------
 * `aspect-ratio` locks the collage to its design proportions while
 * `max-width: var(--rf-natural-w)` caps it at the natural design
 * size. Below that it shrinks fluidly with the parent.
 */
.rfimagelayout-root .image-layout {
  display: flex;
  align-items: stretch;
  gap: var(--rf-gap-h);
  width: 100%;
  max-width: var(--rf-natural-w);
  aspect-ratio: 615 / 412;
  margin: 0 auto;
  padding: 0;
}

.rfimagelayout-root .image-layout__col {
  display: flex;
  flex-direction: column;
  gap: var(--rf-gap-v);
  flex: var(--rf-col-flex) 1 0;
  height: 100%;
  min-width: 0;
}

/* ---------- Cells ---------- */
.rfimagelayout-root .image-layout__cell {
  margin: 0;
  border-radius: var(--rf-cell-radius);
  overflow: hidden;
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

.rfimagelayout-root .image-layout__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* short — landscape framed in a wide-but-short cell */
.rfimagelayout-root .image-layout__cell--short {
  height: var(--rf-short-h);
}

/* tall — portrait framed in a narrow-but-tall cell */
.rfimagelayout-root .image-layout__cell--tall {
  height: var(--rf-tall-h);
}

/* center — single full-height cell. Object-position is exposed via
   the focal-point control so the user can re-frame the source image. */
.rfimagelayout-root .image-layout__cell--center {
  flex: var(--rf-center-flex) 1 0;
  height: 100%;
  width: auto;
  min-width: 0;
}

.rfimagelayout-root .image-layout__cell--center img {
  object-position: var(--rf-center-position-x) center;
}

/* ---------- Tablet + Mobile ----------
 * Mobile design uses a slightly tighter cell radius. Everything else
 * scales fluidly via the percentage-based geometry above, so no
 * other overrides are needed.
 */
@media (max-width: 1024px) {
  .rfimagelayout-root {
    --rf-cell-radius: 13.693px;
  }
}

/* ---------- Phone edge-bleed ----------
 * On phones the collage stretches past the parent on both sides so
 * the side columns sit half-clipped against the viewport edges (per
 * the design). Cells render at the same design ratios — only the
 * outer halves are hidden by the overflow clip, which makes the
 * visible side images read as larger zoom-ins. Center cell is
 * unaffected. Border-radius on the clipped outer corners is hidden
 * by overflow, so no per-corner overrides are needed.
 */
@media (max-width: 767px) {
  .rfimagelayout-root {
    overflow: hidden;
  }
  .rfimagelayout-root .image-layout {
    width: 150%;
    max-width: none;
    margin-left: -25%;
    margin-right: -25%;
  }
}