/* ==========================================================
   Albert's - Components V2
   Component 02: Media Mosaic
   v5 - Structured editorial Tetris wall
   ========================================================== */

.media-mosaic {
  --mm-green:#26362f;
  --mm-green-deep:#1b2822;
  --mm-green-soft:#31473b;
  --mm-cream:#f4efe6;
  --mm-orange:#bd6d3f;
  --mm-gap:6px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(92px,8vw,135px) 0 clamp(105px,9vw,155px);
  color:var(--mm-cream);
  background:
    radial-gradient(ellipse at 72% 22%,rgba(131,159,140,.14),transparent 34%),
    linear-gradient(142deg,var(--mm-green-soft) 0%,var(--mm-green) 52%,var(--mm-green-deep) 100%);
}

.media-mosaic::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.11;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 38px);
}

.media-mosaic--cream,
.media-mosaic--green { color:var(--mm-cream); }

.media-mosaic--charcoal {
  background:linear-gradient(140deg,#302f2c,#20201e 65%,#171715);
}

.media-mosaic__inner {
  width:min(calc(100% - clamp(42px,7vw,124px)),1460px);
  margin:0 auto;
}

/* Intro is now a centred editorial masthead, not a left-hand column. */
.media-mosaic__copy {
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  min-height:clamp(285px,25vw,390px);
  margin-bottom:clamp(52px,5vw,78px);
  text-align:center;
}

.media-mosaic__copy-inner {
  position:relative;
  z-index:2;
  width:min(760px,88%);
  align-self:center;
}

.media-mosaic__decorative {
  position:absolute;
  z-index:0;
  top:50%;
  left:50%;
  width:max-content;
  max-width:none;
  pointer-events:none;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(189,109,63,.42);
  font-family:'BigMooreItalic','BigMoore',Georgia,serif;
  font-size:clamp(8rem,14vw,15.5rem);
  font-weight:400;
  line-height:.8;
  letter-spacing:-.045em;
  text-transform:none;
  opacity:.92;
  transform:translate(-50%,-66%);
}

.media-mosaic__eyebrow {
  margin:0 0 18px;
  color:var(--mm-orange);
  font-family:'Engravers',Arial,sans-serif;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.18em;
  line-height:1.5;
  text-transform:uppercase;
}

.media-mosaic__title {
  max-width:12ch;
  margin:0 auto;
  color:inherit;
  font-family:'BigMoore',Georgia,serif;
  font-size:clamp(4rem,5.5vw,7rem);
  font-weight:300;
  letter-spacing:-.037em;
  line-height:.98;
  text-align:center;
  text-transform:none;
  text-wrap:balance;
}

.media-mosaic__title::after {
  content:"";
  display:block;
  width:clamp(120px,11vw,185px);
  height:1px;
  margin:28px auto 0;
  background:var(--mm-orange);
}

.media-mosaic__intro {
  max-width:650px;
  margin:25px auto 0;
  font-family:Arial,sans-serif;
  font-size:clamp(1.02rem,1.1vw,1.15rem);
  line-height:1.68;
  letter-spacing:0;
  text-transform:none!important;
}

.media-mosaic__intro * {
  text-transform:none!important;
  letter-spacing:0;
}

.media-mosaic__intro>:first-child{margin-top:0}
.media-mosaic__intro>:last-child{margin-bottom:0}

.media-mosaic__cta {
  display:inline-flex;
  min-height:54px;
  align-items:center;
  justify-content:center;
  margin-top:28px;
  padding:15px 28px 14px;
  border:1px solid var(--mm-orange);
  border-radius:999px;
  background:var(--mm-orange);
  color:#fff;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.08em;
  text-decoration:none;
  text-transform:uppercase;
}

/*
 * Strict CSS Grid. No absolute positioning, no transforms, no negative margins.
 * This deliberately avoids the overlap problems seen in v3/v4.
 */
.media-mosaic__grid {
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:repeat(9,minmax(0,1fr));
  gap:var(--mm-gap);
  height:clamp(720px,56vw,900px);
  position:relative!important;
  isolation:isolate;
}

.media-mosaic__item {
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  width:auto!important;
  height:auto!important;
  min-width:0;
  min-height:0;
  margin:0!important;
  transform:none!important;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.media-mosaic__item--1 {
  grid-column:1 / 7;
  grid-row:1 / 6;
}

.media-mosaic__item--2 {
  grid-column:7 / 10;
  grid-row:1 / 5;
}

.media-mosaic__item--3 {
  grid-column:10 / 13;
  grid-row:1 / 5;
}

.media-mosaic__item--4 {
  grid-column:7 / 13;
  grid-row:5 / 10;
}

.media-mosaic__item--5 {
  grid-column:1 / 7;
  grid-row:6 / 10;
}

.media-mosaic__frame {
  position:relative;
  flex:1 1 auto;
  min-height:0;
  width:100%;
  overflow:hidden;
  background:#18221d;
  border:1px solid rgba(189,109,63,.42);
}

.media-mosaic__media {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 650ms cubic-bezier(.2,.7,.2,1);
}

.media-mosaic__item:hover .media-mosaic__media {
  transform:scale(1.018);
}

.media-mosaic__item--position-top .media-mosaic__media{object-position:center top}
.media-mosaic__item--position-bottom .media-mosaic__media{object-position:center bottom}
.media-mosaic__item--position-left .media-mosaic__media{object-position:left center}
.media-mosaic__item--position-right .media-mosaic__media{object-position:right center}

.media-mosaic__caption {
  flex:0 0 auto;
  margin:0;
  padding:9px 3px 2px;
  color:rgba(244,239,230,.88);
  font-family:'BigMooreItalic','BigMoore',Georgia,serif;
  font-size:clamp(.98rem,1vw,1.18rem);
  font-weight:400;
  line-height:1.15;
  letter-spacing:0;
  text-transform:none;
  background:transparent;
  border:0;
}

@media(max-width:900px) {
  .media-mosaic__grid {
    height:720px;
  }
}

@media(max-width:767px) {
  .media-mosaic {
    padding:76px 0 94px;
  }

  .media-mosaic__inner {
    width:calc(100% - 28px);
  }

  .media-mosaic__copy {
    min-height:315px;
    margin-bottom:42px;
  }

  .media-mosaic__copy-inner {
    width:94%;
  }

  .media-mosaic__decorative {
    font-size:clamp(5.7rem,24vw,8.3rem);
    -webkit-text-stroke:1px rgba(189,109,63,.38);
    opacity:.78;
  }

  .media-mosaic__title {
    max-width:9.5ch;
    font-size:clamp(3.55rem,14.8vw,5rem);
  }

  .media-mosaic__intro {
    max-width:31rem;
    font-size:1rem;
    line-height:1.62;
  }

  .media-mosaic__grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:250px 170px 235px 245px;
    gap:4px;
    height:auto;
  }

  .media-mosaic__item--1 {
    grid-column:1 / 3;
    grid-row:1;
  }

  .media-mosaic__item--2 {
    grid-column:1;
    grid-row:2;
  }

  .media-mosaic__item--3 {
    grid-column:2;
    grid-row:2;
  }

  .media-mosaic__item--4 {
    grid-column:1 / 3;
    grid-row:3;
  }

  .media-mosaic__item--5 {
    grid-column:1 / 3;
    grid-row:4;
  }

  .media-mosaic__caption {
    padding-top:7px;
    font-size:.98rem;
  }
}

@media(max-width:420px) {
  .media-mosaic__copy {
    min-height:300px;
  }

  .media-mosaic__grid {
    grid-template-rows:230px 155px 215px 225px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .media-mosaic__media { transition:none; }
}