/* ===================================================================
   responsive-fixes.css — Time4Bets
   Final responsive hardening loaded AFTER main.css and entry-content.css.

   Goals:
   - keep custom ACF section media inside the viewport;
   - preserve the real landscape ratio of Bonus artwork;
   - prevent empty image wrappers from distorting cards;
   - normalize standard Gutenberg image / Media & Text / Columns blocks;
   - leave desktop composition intact unless a block would overflow.
   =================================================================== */

/* All layout children are allowed to shrink instead of forcing overflow. */
.main,
.section,
.section > .container,
.section-top,
.section-top > *,
.card-grid,
.card-grid > *,
.steps,
.steps > *,
.split,
.split > *,
.entry-content,
.entry-content > *,
.entry-content .wp-block-column{
  min-width:0;
}

.section > .container,
.standard-content,
.entry-content{
  width:100%;
}

/* Custom ACF section images. */
.img-slot{
  max-width:100%;
}

.img-slot-side{
  max-width:460px;
}

.img-slot-side img,
.slot-card .img-slot-mini img,
.bonus-card .img-slot-mini img{
  width:100%;
  max-width:100%;
  display:block;
}

/* Bonus artwork in this theme is landscape (normally ~700x380), not square.
   Do not crop it into the square slot artwork treatment. */
.bonus-card .img-slot-mini{
  width:100%;
  max-width:100%;
  aspect-ratio:35 / 19;
  overflow:hidden;
}
.bonus-card .img-slot-mini img{
  height:100%;
  object-fit:cover;
}

/* Slot artwork remains square. */
.slot-card .img-slot-mini{
  width:100%;
  max-width:100%;
  aspect-ratio:1 / 1;
}

/* Gutenberg/core media must never retain an editor width larger than the
   rendered content column. */
.entry-content figure,
.entry-content picture,
.entry-content .wp-block-image,
.entry-content .wp-block-gallery,
.entry-content .wp-block-video,
.entry-content .wp-block-cover,
.entry-content .wp-block-media-text,
.entry-content .wp-block-media-text__media{
  max-width:100%;
}

.entry-content img,
.entry-content picture img,
.entry-content .wp-block-image img,
.entry-content .wp-block-media-text__media img{
  max-width:100%;
  height:auto;
}

/* A hand-entered fixed pixel width on a figure must still fit a phone. */
.entry-content figure[style],
.entry-content .wp-block-image[style]{
  max-width:100% !important;
}

@media (max-width:900px){
  /* Custom section intro rows use an explicit single-column mobile layout.
     This is more predictable than relying on flex-wrap + desktop flex-basis. */
  .section-top{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:24px;
    width:100%;
    margin-bottom:32px;
  }

  .section-top .section-head,
  .section-top .img-slot-side{
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    flex:none;
  }

  /* Side artwork is landscape throughout the supplied theme assets. */
  .section-top .img-slot-side{
    aspect-ratio:35 / 19;
  }

  .section-top .img-slot-side img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* Mobile app split should never inherit a desktop-sized visual column. */
  .split{
    grid-template-columns:minmax(0,1fr) !important;
    gap:32px;
  }
  .phone-mock{
    width:min(440px,100%);
    max-width:100%;
  }
}

@media (max-width:781px){
  /* Standard Gutenberg Media & Text: normalize both desktop orientations to
     media -> copy on phones. It avoids image/image seams between blocks. */
  .entry-content .wp-block-media-text,
  .entry-content .wp-block-media-text.has-media-on-the-right{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:20px !important;
  }

  .entry-content .wp-block-media-text .wp-block-media-text__media{
    order:1 !important;
    width:100% !important;
    margin:0 !important;
  }
  .entry-content .wp-block-media-text .wp-block-media-text__content{
    order:2 !important;
    width:100% !important;
    padding:0 !important;
  }
  .entry-content .wp-block-media-text .wp-block-media-text__media img{
    width:100%;
    height:auto;
  }

  /* Non-normalized core Columns still need safe widths on mobile. */
  .entry-content .wp-block-columns{
    max-width:100%;
  }
  .entry-content .wp-block-column{
    max-width:100%;
  }
}

@media (max-width:640px){
  .section{
    padding-left:16px;
    padding-right:16px;
  }

  .card,
  .step{
    max-width:100%;
  }

  /* Bonus cards contain landscape banners + longer promotional copy; one
     column is substantially more stable on phone widths. */
  #bonus .card-grid.cols-3{
    grid-template-columns:minmax(0,1fr);
  }

  .bonus-card{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .app-download-row{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
  }
  .app-download-btn{
    width:100%;
    min-width:0;
  }
}

@media (max-width:480px){
  .card-grid,
  .card-grid.cols-3,
  .steps{
    grid-template-columns:minmax(0,1fr);
  }
}

/* Optional clickable Mobile App phone artwork. main.css intentionally disables
   pointer events on the decorative phone visual; re-enable them only when the
   block editor has supplied a Phone image link. */
.phone-mock.phone-mock-link{
  display:block;
  pointer-events:auto;
  cursor:pointer;
  text-decoration:none;
}
.phone-mock.phone-mock-link:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:4px;
}

/* Hero readability hardening. The copy position changes with viewport width,
   therefore the background must remain dark across the entire image rather
   than only behind one assumed text position. */
.hero-bg-overlay{
  background:linear-gradient(180deg, rgba(3,13,10,.84) 0%, rgba(3,13,10,.89) 58%, rgba(3,13,10,.97) 100%);
}
.hero h1{
  color:#ffffff;
  text-shadow:none;
}
.hero h1 .accent{
  background:none;
  color:var(--mint);
  -webkit-text-fill-color:var(--mint);
  text-shadow:none;
}
.hero .lead{
  color:#e9fff8;
  text-shadow:0 2px 18px rgba(0,0,0,.72);
}
@media (max-width:768px){
  .hero-bg-overlay{
    background:linear-gradient(180deg, rgba(3,13,10,.89) 0%, rgba(3,13,10,.93) 58%, rgba(3,13,10,.985) 100%);
  }
}