/* ─── Loop Projects Grid ──────────────────────────────────── */

/* Container query context (needed for 100cqw calculations)   */
#loop_projects {
  container-type: inline-size;
}

#loop_projects .elementor-loop-container {
  grid-auto-flow: dense;
  --col-gap: 20px; /* match your Elementor column gap setting  */
}

/* Featured item spans 2 columns */
#loop_projects .elementor-loop-container .is-featured {
  grid-column: span 2;
}

/* ─── Image widget wrapper — width chain ─────────────────── */

#loop_projects .elementor-loop-container .elementor-widget-image,
#loop_projects .elementor-loop-container .elementor-widget-image .elementor-widget-container,
#loop_projects .elementor-loop-container .elementor-widget-image a,
#loop_projects .elementor-loop-container .elementor-widget-image figure {
  display:  block;
  width:    100%;
  margin:   0;
  padding:  0;
  overflow: hidden;
}

/* ─── Normal card image height chain ─────────────────────── */
/*                                                             */
/* Card ratio: 4:5 portrait (width:height)                    */
/* col-width  = (100cqw − 2 × gap) ÷ 3                       */
/* img height = col-width × (5/4)                             */

#loop_projects .elementor-loop-container .elementor-widget-image,
#loop_projects .elementor-loop-container .elementor-widget-image .elementor-widget-container,
#loop_projects .elementor-loop-container .elementor-widget-image a,
#loop_projects .elementor-loop-container .elementor-widget-image figure {
  height: calc( ( 100cqw - 2 * var(--col-gap) ) / 3 * 5 / 4 );
}

#loop_projects .elementor-loop-container .elementor-widget-image img {
  display:         block;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
}

/* ─── Featured card image height chain ───────────────────── */
/*                                                             */
/* Same height as one normal card — bottom edges align.       */

#loop_projects .elementor-loop-container .is-featured .elementor-widget-image,
#loop_projects .elementor-loop-container .is-featured .elementor-widget-image .elementor-widget-container,
#loop_projects .elementor-loop-container .is-featured .elementor-widget-image a,
#loop_projects .elementor-loop-container .is-featured .elementor-widget-image figure {
  height: calc( ( 100cqw - 2 * var(--col-gap) ) / 3 * 5 / 4 );
}

/* ─── Tablet: 2 columns ──────────────────────────────────── */
@media (max-width: 1024px) {
  #loop_projects .elementor-loop-container .is-featured {
    grid-column: span 2;
  }

  /* col-width = (100cqw − 1 × gap) ÷ 2                       */
  /* img height = col-width × (5/4)                            */
  #loop_projects .elementor-loop-container .elementor-widget-image,
  #loop_projects .elementor-loop-container .elementor-widget-image .elementor-widget-container,
  #loop_projects .elementor-loop-container .elementor-widget-image a,
  #loop_projects .elementor-loop-container .elementor-widget-image figure,
  #loop_projects .elementor-loop-container .is-featured .elementor-widget-image,
  #loop_projects .elementor-loop-container .is-featured .elementor-widget-image .elementor-widget-container,
  #loop_projects .elementor-loop-container .is-featured .elementor-widget-image a,
  #loop_projects .elementor-loop-container .is-featured .elementor-widget-image figure {
    height: calc( ( 100cqw - var(--col-gap) ) / 2 * 5 / 4 );
  }
}

/* ─── Mobile: 1 column ───────────────────────────────────── */
@media (max-width: 767px) {
  #loop_projects .elementor-loop-container .is-featured {
    grid-column: span 1;
  }

  /* Full width single column — col-width = 100cqw            */
  #loop_projects .elementor-loop-container .elementor-widget-image,
  #loop_projects .elementor-loop-container .elementor-widget-image .elementor-widget-container,
  #loop_projects .elementor-loop-container .elementor-widget-image a,
  #loop_projects .elementor-loop-container .elementor-widget-image figure,
  #loop_projects .elementor-loop-container .is-featured .elementor-widget-image,
  #loop_projects .elementor-loop-container .is-featured .elementor-widget-image .elementor-widget-container,
  #loop_projects .elementor-loop-container .is-featured .elementor-widget-image a,
  #loop_projects .elementor-loop-container .is-featured .elementor-widget-image figure {
    height: calc( 100cqw * 5 / 4 );
  }
}