/* cz-text-image/module.css
   Base styles live in main.css: .tile-block-container, .img-right
   Only background variant and typography overrides are declared here.
*/

/* HubSpot column wrapper resets heading weights to normal;
   set explicitly so h2 renders Recoleta Medium (500) as intended.
   Also override global H2 size (3rem/48px) to maintain original
   H3 size (2.25rem/36px) — changed from H3→H2 for accessibility
   but visual size should remain the same. */
.tile-block-container .content .title {
  font-family: 'Recoleta', serif;
  font-weight: 500;
  font-size: 1.5rem;  /* 24px mobile (same as original H3) */
}

@media (min-width: 767px) {
  .tile-block-container .content .title {
    font-size: 2.25rem;  /* 36px desktop (same as original H3) */
  }
}

/* Reduced vertical padding — .section-p gives 60px each side at 992px+,
   which stacks to 120px between consecutive modules. Bring it down to
   a more editorial 40–48px so stacked text-image blocks breathe but
   don’t feel cavernous. */
.tile-block-module-wrapper {  overflow: visible !important; /* Ensure parent doesn't clip shadows */  padding-bottom: 40px;
  padding-top: 40px;
}
@media screen and (min-width: 992px) {
  .tile-block-module-wrapper {
    padding-bottom: 48px;
    padding-top: 48px;
  }
}

/* Own centering — 5-tier fixed widths.
   Scoped to the module wrapper so it doesn't affect other elements. */
.tile-block-module-wrapper .tile-block-container {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  overflow: visible !important; /* Ensure container doesn't clip shadows */
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
}

/* SM: 540px */
@media (min-width: 576px) {
  .tile-block-module-wrapper .tile-block-container {
    max-width: 540px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* MD: 720px */
@media (min-width: 768px) {
  .tile-block-module-wrapper .tile-block-container {
    max-width: 720px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* LG: 960px */
@media (min-width: 992px) {
  .tile-block-module-wrapper .tile-block-container {
    max-width: 960px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* XL: 1300px */
@media (min-width: 1280px) {
  .tile-block-module-wrapper .tile-block-container {
    max-width: 1300px;
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* H3 headings inside the rich-text description get breathing room above
   them (editorial style: sub-headings break up body copy). First h3 is
   flush (matches the single title above it). */
.tile-block-container .content .description h2,
.tile-block-container .content .description h3 {
  margin-bottom: 8px;
  margin-top: 48px;
}

.tile-block-container .content .description h2:first-child,
.tile-block-container .content .description h3:first-child {
  margin-top: 0;
}

/* Photo style — reduce container size for better proportion and add margin for breathing room beyond shadow */
.tile-block-container .img-block:not([class*="cz-ti-illus"]),
.tile-block-container .img-block.rounded {
  background: transparent;
  box-shadow: 0 0 54px 20px rgba(82, 82, 90, 0.12) !important; /* Warm neutral shadow - more natural than pure black */
  overflow: visible !important; /* Override .rounded { overflow: hidden } from main.css which clips shadow */
}

/* Apply border-radius to images inside photo blocks (since overflow:visible prevents container clipping) */
/* Images fill container completely (override main.css dimensions) */
.tile-block-container .img-block:not([class*="cz-ti-illus"]) img,
.tile-block-container .img-block.rounded img {
  border-radius: 10px !important;
  display: block;
  height: 100% !important;
  object-fit: cover !important;
  width: 100% !important;
}

@media screen and (min-width: 767px) {
  .tile-block-container .img-block:not([class*="cz-ti-illus"]) img,
  .tile-block-container .img-block.rounded img {
    border-radius: 20px !important;
  }
}

/* Control size via img-block container instead of img element */
@media screen and (max-width: 767px) {
  .tile-block-container .img-block:not([class*="cz-ti-illus"]),
  .tile-block-container .img-block.rounded {
    height: 280px;
  }
}

@media screen and (min-width: 767px) and (max-width: 991px) {
  .tile-block-container .img-block:not([class*="cz-ti-illus"]),
  .tile-block-container .img-block.rounded {
    height: 400px;
  }
}

@media screen and (min-width: 992px) {
  .tile-block-container .img-block:not([class*="cz-ti-illus"]),
  .tile-block-container .img-block.rounded {
    height: 360px;
    margin-right: 72px !important;
    width: 360px !important;
  }
  .tile-block-container.img-right .img-block:not([class*="cz-ti-illus"]) {
    margin-left: 72px !important;
    margin-right: 0 !important;
  }
}

@media screen and (min-width: 1280px) {
  .tile-block-container .img-block:not([class*="cz-ti-illus"]),
  .tile-block-container .img-block.rounded {
    height: 420px;
    margin-right: 80px !important;
    width: 480px !important;
  }
  .tile-block-container.img-right .img-block:not([class*="cz-ti-illus"]) {
    margin-left: 80px !important;
    margin-right: 0 !important;
  }
}

/* Illustration style — no shadow, no crop, no padding */
.cz-ti-illus {
  box-shadow: none !important;
  padding: 0 !important;
  transition: none !important;
}

.cz-ti-illus img {
  height: auto !important;
  max-height: none !important;
  max-width: 100% !important;
  object-fit: contain !important;
  transition: none !important;
  width: 100% !important;
}

/* Green tick bullets (apply .cz-ti-green-ticks class to content wrapper) */
.cz-ti-green-ticks ul {
  list-style: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.cz-ti-green-ticks ul li {
  padding-left: 1.5em;
  position: relative;
  margin-bottom: 0.5em;
  list-style: none !important;
}

.cz-ti-green-ticks ul li::before {
  content: '✔';
  color: #279a93;
  position: absolute;
  left: 0;
  font-size: 1.1em; /* Slightly bigger tick */
  line-height: inherit;
  font-weight: bold; /* Make tick more prominent */
}

/* ----------------------------------------------------------------
   Breakpoints — three meaningful desktop steps before mobile stack:
     ≤767px    mobile: stacked (main.css default, no change needed)
     768–991px  small desktop: side-by-side, compact proportions
     992–1279px medium desktop: fuller proportions
     1280px+    wide desktop: maximum proportions

   Main.css delays side-by-side to 992px — override here to 768px.
   Direction-aware margins: gap (facing text) vs 0 (facing edge).
---------------------------------------------------------------- */

/* 768px+: trigger side-by-side layout */
@media screen and (min-width: 768px) {
  .tile-block-module-wrapper .tile-block-container {
    align-items: center;
    flex-direction: row !important;   /* beats main.css base flex-direction: column */
    justify-content: center;          /* centre the image+gap+text block so empty space
                                         is split evenly left & right (flex-start pushed
                                         img-right content hard-right, leaving visible
                                         empty space on the left) */
  }
  .tile-block-module-wrapper .tile-block-container.img-right {
    flex-direction: row-reverse !important;
  }
  .tile-block-module-wrapper .tile-block-container .content {
    margin-top: 0;
  }
  /* Regular (photo) img-block direction-aware gaps */
  .tile-block-module-wrapper .tile-block-container:not(.img-right) .img-block {
    margin-left: 0;
    margin-right: 40px;
    width: auto;
  }
  .tile-block-module-wrapper .tile-block-container.img-right .img-block {
    margin-left: 40px;
    margin-right: 0;
    width: auto;
  }
}

/* Illustration shapes at 768–991px: compact widths, 40px gap */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .tile-block-container:not(.img-right) [class*="cz-ti-illus"] { margin-left: 0 !important; margin-right: 40px !important; }
  .tile-block-container.img-right [class*="cz-ti-illus"]        { margin-left: 40px !important; margin-right: 0 !important; }

  .tile-block-container .cz-ti-illus--super-tall  { flex: 0 0 20% !important; max-width: 20% !important; width: 20% !important; }
  .tile-block-container .cz-ti-illus--portrait    { flex: 0 0 32% !important; max-width: 32% !important; width: 32% !important; }
  .tile-block-container .cz-ti-illus--square      { flex: 0 0 36% !important; max-width: 36% !important; width: 36% !important; }
  .tile-block-container .cz-ti-illus--landscape   { flex: 0 0 42% !important; max-width: 42% !important; width: 42% !important; }
  .tile-block-container .cz-ti-illus--wide        { flex: 0 0 48% !important; max-width: 48% !important; width: 48% !important; }
}

/* Illustration shapes at 992px+: full proportions, 60px gap */
@media screen and (min-width: 992px) {
  /* Override main.css justify-content: space-around — use center so the
     image+gap+text block is balanced within the 1080px container. */
  .tile-block-module-wrapper .tile-block-container {
    justify-content: center;
  }

  /* Gap faces the text column, not the container edge */
  .tile-block-container:not(.img-right) [class*="cz-ti-illus"] { margin-left: 0 !important; margin-right: 60px !important; }
  .tile-block-container.img-right [class*="cz-ti-illus"]        { margin-left: 60px !important; margin-right: 0 !important; }

  .tile-block-container .cz-ti-illus--super-tall {
    flex: 0 0 28% !important; max-width: 28% !important; width: 28% !important;
  }
  .tile-block-container .cz-ti-illus--super-tall img  { max-height: 600px !important; }

  .tile-block-container .cz-ti-illus--portrait {
    flex: 0 0 38% !important; max-width: 38% !important; width: 38% !important;
  }
  .tile-block-container .cz-ti-illus--portrait img    { max-height: 480px !important; }

  .tile-block-container .cz-ti-illus--square {
    flex: 0 0 43% !important; max-width: 43% !important; width: 43% !important;
  }
  .tile-block-container .cz-ti-illus--square img      { max-height: 380px !important; }

  .tile-block-container .cz-ti-illus--landscape {
    flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important;
  }
  .tile-block-container .cz-ti-illus--landscape img   { max-height: 340px !important; }

  .tile-block-container .cz-ti-illus--wide {
    flex: 0 0 56% !important; max-width: 56% !important; width: 56% !important;
  }
  .tile-block-container .cz-ti-illus--wide img        { max-height: 280px !important; }
}

/* ----------------------------------------------------------------
   Mobile (≤767px) — stacked layout
   super-tall illustrations are too narrow to read when full-width;
   hide them. All other shapes get a sensible max-height so they
   don't swamp the content below before the user has scrolled.
---------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* Hide super-tall illustrations entirely on mobile */
  .tile-block-container .cz-ti-illus--super-tall {
    display: none !important;
  }
  /* When image is hidden, remove the gap it would have created above .content */
  .tile-block-container:has(.cz-ti-illus--super-tall) .content {
    margin-top: 0;
  }

  /* Cap max-height for remaining shapes when stacked */
  .tile-block-container .cz-ti-illus--portrait img    { max-height: 280px !important; }
  .tile-block-container .cz-ti-illus--square img      { max-height: 260px !important; }
  .tile-block-container .cz-ti-illus--landscape img   { max-height: 220px !important; }
  .tile-block-container .cz-ti-illus--wide img        { max-height: 180px !important; }
}

/* ----------------------------------------------------------------
   Desktop image width cap  (image_max_width_desktop field)
   The cz-ti-capped class + --cz-img-cap variable are set on the
   wrapper via module.html when the field has a value.
   Rules live in module.css so they are always-live (no re-add).
   Shape variant class is stripped in module.html when cap is set,
   so there are no !important shape rules to fight here.
---------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .cz-ti-capped .img-block {
    flex: 0 0 auto;
    max-width: var(--cz-img-cap);
    width: var(--cz-img-cap);
  }
  /* Override main.css fixed pixel dimensions on the img */
  .cz-ti-capped .img-block img {
    height: auto;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
  }
}

/* ----------------------------------------------------------------
   Mobile image height cap  (image_max_height_mobile field)
   Must use !important because when desktop cap is set, the shape
   class is removed (which has !important defaults above).
---------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* Center images on mobile when they're constrained (narrower than full width) */
  .cz-ti-mh-capped .img-block {
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important; /* Override main.css width: 100% to allow centering */
  }
  
  /* Fallback: cap all illustrations when desktop cap removes shape class */
  .cz-ti-capped .img-block.cz-ti-illus img {
    max-height: 450px; /* Generous default prevents oversized portraits */
  }
  
  /* Manual cap takes precedence */
  .cz-ti-mh-capped .img-block img {
    height: auto !important;
    max-height: var(--cz-img-mh) !important;
    width: auto !important;
  }
}

/* ----------------------------------------------------------------
   Video popup — coral play button overlay on image
   16/03 11:13
---------------------------------------------------------------- */
.cz-ti-video-block {
  cursor: pointer;
  position: relative;
}

.cz-ti-play-btn {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: transform 0.2s ease;
}

.cz-ti-video-block:hover .cz-ti-play-btn {
  transform: scale(1.1);
}

.cz-ti-play-btn svg {
  drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}