/* === Custom Region Tiles – region-tiles.css (img lazy-load + responsive custom sizes + alignment + max-width control) === */

.crt-section{
  margin: 40px auto;
  width: 100%;
  max-width: var(--crt-maxw, 1100px);
  padding: 0 20px;
}

.crt-section-title{
  margin: 0 0 12px;
  font-family: "Forum", serif;
  font-weight: 700;
  text-align: left;
  letter-spacing: var(--crt-sec-letter, 0px);
}

/* Heading font size per device */
@media (min-width: 992px){
  .crt-section-title{ font-size: var(--crt-sec-h-d, 40px); }
}
@media (min-width: 600px) and (max-width: 991px){
  .crt-section-title{ font-size: var(--crt-sec-h-t, 32px); }
}
@media (max-width: 599px){
  .crt-section-title{ font-size: var(--crt-sec-h-m, 26px); }
}

/* Tiles grid */
.crt-tiles-grid{
  --crt-gap: 6px;

  display: flex;
  flex-wrap: wrap;
  gap: var(--crt-gap);

  justify-content: var(--crt-align, center);
  align-content: flex-start;
}

/* Base tile */
.crt-tile{
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;

  flex: 0 0 auto;
  box-sizing: border-box;

  /* Per-tile override plumbing:
     Desktop uses --crt-cw-d/--crt-ch-d
     Mobile uses --crt-cw-m/--crt-ch-m (fallback to desktop if missing) */
  --crt-cw: var(--crt-cw-d);
  --crt-ch: var(--crt-ch-d);

  background: #fff; /* shows behind contain images if any */
}

@media (max-width: 599px){
  .crt-tile{
    --crt-cw: var(--crt-cw-m, var(--crt-cw-d));
    --crt-ch: var(--crt-ch-m, var(--crt-ch-d));
  }
}

/* Border radius */
@media (min-width: 600px){
  .crt-tile{ border-radius: 15px; }
}
@media (max-width: 599px){
  .crt-tile{ border-radius: 8px; }
}

/* Tile image fills the tile like a real background (matches screenshot) */
.crt-tile .crt-tile-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;

  object-fit: cover;       /* IMPORTANT: full-bleed image */
  object-position: center; /* center crop */
}

/* Overlay */
.crt-tile-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;

  padding: 24px;
  font-family: "Forum", serif;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
}

/* Extra top spacing for TOP positions */
@media (min-width: 600px){
  .crt-pos-top-left .crt-tile-overlay,
  .crt-pos-top-center .crt-tile-overlay,
  .crt-pos-top-right .crt-tile-overlay{
    padding-top: 52px;
  }
}
@media (max-width: 599px){
  .crt-pos-top-left .crt-tile-overlay,
  .crt-pos-top-center .crt-tile-overlay,
  .crt-pos-top-right .crt-tile-overlay{
    padding-top: 14px;
    justify-content: flex-start;
    align-items: center;
  }
}

/* Heading + desc */
.crt-tile-heading{
  margin-bottom: 4px;
  color: var(--crt-tile-heading-color, #ffffff);
}
@media (min-width: 992px){
  .crt-tile-heading{ font-size: var(--crt-tile-h-d, 60px); }
}
@media (min-width: 600px) and (max-width: 991px){
  .crt-tile-heading{ font-size: var(--crt-tile-h-t, 40px); }
}
@media (max-width: 599px){
  .crt-tile-heading{ font-size: var(--crt-tile-h-m, 20px); }
}

.crt-tile-desc{
  font-size: 16px;
  font-weight: 400;
}
@media (max-width: 599px){
  .crt-tile-desc{ font-size: 12px; }
}

/* Positions */
.crt-pos-top-left    .crt-tile-overlay { justify-content: flex-start; align-items: flex-start; text-align: left; }
.crt-pos-top-center  .crt-tile-overlay { justify-content: flex-start; align-items: center;     text-align: center; }
.crt-pos-top-right   .crt-tile-overlay { justify-content: flex-start; align-items: flex-end;   text-align: right; }

.crt-pos-middle-left   .crt-tile-overlay { justify-content: center; align-items: flex-start; text-align: left; }
.crt-pos-middle-center .crt-tile-overlay { justify-content: center; align-items: center;     text-align: center; }
.crt-pos-middle-right  .crt-tile-overlay { justify-content: center; align-items: flex-end;   text-align: right; }

.crt-pos-bottom-left   .crt-tile-overlay { justify-content: flex-end; align-items: flex-start; text-align: left; }
.crt-pos-bottom-center .crt-tile-overlay { justify-content: flex-end; align-items: center;     text-align: center; }
.crt-pos-bottom-right  .crt-tile-overlay { justify-content: flex-end; align-items: flex-end;   text-align: right; }

/* ================================
   Tile sizes (defaults per device)
   + per-tile overrides:
   width:  var(--crt-cw, default)
   height: var(--crt-ch, default)
   ================================ */

/* Desktop ≥ 992px */
@media (min-width: 992px){
  .crt-tiles-grid{ --crt-square: 502px; }

  .crt-tile--square{
    width:  var(--crt-cw, var(--crt-square));
    height: var(--crt-ch, var(--crt-square));
  }

  .crt-tile--portrait{
    width:  var(--crt-cw, calc((2 * var(--crt-square) - var(--crt-gap)) / 3));
    height: var(--crt-ch, var(--crt-square));
  }

  .crt-tile--land{
    width:  var(--crt-cw, var(--crt-square));
    height: var(--crt-ch, calc((2 * var(--crt-square) - var(--crt-gap)) / 3));
  }
}

/* Tablet 600–991px */
@media (min-width: 600px) and (max-width: 991px){
  .crt-tiles-grid{ --crt-square: 361px; }

  .crt-tile--square{
    width:  var(--crt-cw, var(--crt-square));
    height: var(--crt-ch, var(--crt-square));
  }

  .crt-tile--portrait{
    width:  var(--crt-cw, calc((2 * var(--crt-square) - var(--crt-gap)) / 3));
    height: var(--crt-ch, var(--crt-square));
  }

  .crt-tile--land{
    width:  var(--crt-cw, var(--crt-square));
    height: var(--crt-ch, calc((2 * var(--crt-square) - var(--crt-gap)) / 3));
  }
}

/* Mobile ≤ 599px */
@media (max-width: 599px){
  .crt-tiles-grid{ --crt-square: 150px; }

  .crt-tile--square{
    width:  var(--crt-cw, var(--crt-square));
    height: var(--crt-ch, var(--crt-square));
  }

  .crt-tile--portrait{
    width:  var(--crt-cw, calc((2 * var(--crt-square) - var(--crt-gap)) / 3));
    height: var(--crt-ch, var(--crt-square));
  }

  .crt-tile--land{
    width:  var(--crt-cw, var(--crt-square));
    height: var(--crt-ch, calc((2 * var(--crt-square) - var(--crt-gap)) / 3));
  }
}

/* Admin image cell layout */
#crt-tiles-table .crt-tile-image-wrap{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Fix overlapping wrapped state names on DESKTOP */
@media (min-width: 992px){
  .crt-tile-heading{
    line-height: 1.08;      /* increase spacing between lines */
    margin-bottom: 8px;     /* optional: more room before desc */
    display: inline-block;  /* helps avoid weird line box issues */
  }
}