/*
Theme Name:   Kadence Child
Theme URI:    https://www.kadencewp.com/kadence-theme/
Description:  Child theme for Kadence, holding Doral Renewables custom styles.
Author:       Spinutech
Template:     kadence
Version:      1.1.0
Text Domain:  kadence-child
*/

/* ==========================================================================
   Bento stats grid — equal-height columns with flexible (scaling) images

   Setup: add the class  bento-grid  to the OUTER Kadence Row Layout block
   (select the outer row > Advanced > Additional CSS Class(es)).

   Structure this targets:
     .bento-grid (outer row, 1fr 2fr 1fr)
       └ .wp-block-kadence-column        <- one per bento column
           └ .kt-inside-inner-col
               └ .kb-row-layout-wrap     <- NESTED row stacking cards + image
                   └ .kt-row-column-wrap
                       ├ .wp-block-kadence-column  (countup card)
                       └ .wp-block-kadence-column  (image)

   Result: stat cards keep their natural height, image cells absorb whatever
   height is left over, so every column ends flush. The tallest column's
   image aspect ratio drives the overall height.

   NOTE ON SPECIFICITY: Kadence's own rules are `.wp-block-kadence-image
   .kb-is-ratio-image` (0,2,0) and they load from style-blocks-image.css
   AFTER this stylesheet. Selectors below deliberately include
   `figure.wp-block-kadence-image` to outrank them on specificity rather
   than relying on source order. Do not simplify them away.
   ========================================================================== */

@media (min-width: 768px) {

  /* 1 — Outer column shells become flex columns so the nested row can stretch.
         Kadence ships .kt-inside-inner-col as display:block, which is where the
         height chain breaks: height:100% below it has nothing to resolve against. */
  .bento-grid > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* 2 — The nested row layout fills the full height of its column. */
  .bento-grid .kt-inside-inner-col > .kb-row-layout-wrap {
    flex: 1 1 auto;
    min-height: 0;
  }

  .bento-grid .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  /* 3 — Stat cards hold their natural height; image cells take the remainder. */
  .bento-grid .kb-row-layout-wrap > .kt-row-column-wrap > .wp-block-kadence-column {
    flex: 0 0 auto;
  }

  .bento-grid .kb-row-layout-wrap > .kt-row-column-wrap > .wp-block-kadence-column:has(.wp-block-kadence-image) {
    flex: 1 1 auto;
    min-height: 0;
  }

  .bento-grid .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-kadence-image) > .kt-inside-inner-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* 4 — The figure is the flex item that actually grows. */
  .bento-grid figure.wp-block-kadence-image {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    position: relative;
  }

  /* 5 — The real culprit. Setting an image ratio in the Kadence Image block
         wraps the img in .kb-is-ratio-image and locks height with
         `padding-bottom: <percent>`. Percentage padding resolves against the
         element's WIDTH, so it can never absorb leftover vertical space — no
         amount of height:100% on the <img> can fix that.

         Fix: move the ratio onto the figure as aspect-ratio (that becomes its
         starting size, which flex-grow is then free to exceed) and let the
         wrapper fill whatever height the figure lands on. */
  .bento-grid figure.wp-block-kadence-image:has(.kb-image-ratio-square)  { aspect-ratio: 1 / 1; }
  .bento-grid figure.wp-block-kadence-image:has(.kb-image-ratio-land43)  { aspect-ratio: 4 / 3; }
  .bento-grid figure.wp-block-kadence-image:has(.kb-image-ratio-land32)  { aspect-ratio: 3 / 2; }
  .bento-grid figure.wp-block-kadence-image:has(.kb-image-ratio-land169) { aspect-ratio: 16 / 9; }
  .bento-grid figure.wp-block-kadence-image:has(.kb-image-ratio-land21)  { aspect-ratio: 2 / 1; }
  .bento-grid figure.wp-block-kadence-image:has(.kb-image-ratio-land31)  { aspect-ratio: 3 / 1; }
  .bento-grid figure.wp-block-kadence-image:has(.kb-image-ratio-land41)  { aspect-ratio: 4 / 1; }
  .bento-grid figure.wp-block-kadence-image:has(.kb-image-ratio-port34)  { aspect-ratio: 3 / 4; }
  .bento-grid figure.wp-block-kadence-image:has(.kb-image-ratio-port23)  { aspect-ratio: 2 / 3; }

  /* Overrides Kadence's `height:0` + `padding-bottom:<pct>` on the wrapper. */
  .bento-grid figure.wp-block-kadence-image .kb-is-ratio-image {
    position: absolute;
    inset: 0;
    padding-bottom: 0;
    height: auto;
  }

  /* 6 — The image always covers its cell at whatever size it ends up.
         (Kadence already does this for ratio images; this also covers plain
         images with no ratio set, like the large centre one.) */
  .bento-grid figure.wp-block-kadence-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}