/* =====================================================
   EXPLORE NATURAL TUNNEL
   COMPONENT 03 — FEATURE GRID

   Reusable Gutenberg structure:

   Group.ent-feature-grid
     Columns
       Column x 3
         Group (optional)
           Image
           Heading H3
           Paragraph
           Paragraph (link)

   Four-column variation:

   Group.ent-feature-grid.ent-feature-grid--4
     Columns.ent-stay-grid
       Column x 4
         Group.ent-stay-card (optional)
           Image
           Heading H3
           Paragraph
           Paragraph (link)

   Responsive:
   Desktop: 3 or 4 columns
   Tablet:  2 columns
   Mobile:  1 column

   ===================================================== */


/* -----------------------------------------------------
   01 — SECTION CONTAINER
   ----------------------------------------------------- */

.ent-feature-grid {
  width: 100%;
  max-width: none !important;

  margin: 0 !important;

  padding:
    80px
    max(40px, calc((100vw - 1440px) / 2));

  background: var(--ent-cream-light, #faf8f3);
}


/* -----------------------------------------------------
   02 — DEFAULT THREE-COLUMN GRID
   ----------------------------------------------------- */

.ent-feature-grid > .wp-block-columns {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 36px !important;

  align-items: start;

  width: 100%;
  max-width: none !important;

  margin: 0 !important;
  padding: 0;
}

.ent-feature-grid
> .wp-block-columns
> .wp-block-column {
  min-width: 0;
  width: 100%;
  max-width: none;

  flex: none;

  margin: 0 !important;
}


/* -----------------------------------------------------
   03 — FOUR-COLUMN VARIATION
   ----------------------------------------------------- */

.ent-feature-grid--4 > .wp-block-columns {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 24px !important;

  align-items: stretch;
}

.ent-feature-grid--4
> .wp-block-columns
> .wp-block-column {
  display: flex;
  flex-direction: column;

  min-width: 0;
  width: 100%;
  max-width: none;

  margin: 0 !important;
}

.ent-feature-grid--4
.wp-block-column
> .wp-block-group {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;

  min-width: 0;
}


/* -----------------------------------------------------
   04 — STAY ACCOMMODATION GRID

   Supports ent-stay-grid on the Columns block.
   ----------------------------------------------------- */

.ent-feature-grid
.wp-block-columns.ent-stay-grid {
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding: 0 !important;
}



/* -----------------------------------------------------
   05 — FEATURE IMAGES
   ----------------------------------------------------- */

.ent-feature-grid .wp-block-image {
  display: block;

  width: 100%;

  margin: 0 0 24px !important;
  padding: 0;

  overflow: hidden;

  aspect-ratio: 1.5 / 1;

  border-radius: 3px;
}

.ent-feature-grid .wp-block-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition:
    transform 350ms ease;
}

.ent-feature-grid
.wp-block-image:hover img {
  transform: scale(1.025);
}


/* -----------------------------------------------------
   06 — FEATURE HEADINGS
   ----------------------------------------------------- */

.ent-feature-grid h3 {
  font-family: var(--ent-font-body);
  font-size: var(--ent-h4);
  font-weight: var(--ent-weight-bold);

  line-height: 1.08;
  letter-spacing: -0.025em;

  color: var(--ent-forest-dark, #09231d);

  margin: 0 0 16px !important;

  overflow-wrap: normal;
  word-break: normal;
}



/* -----------------------------------------------------
   07 — FEATURE DESCRIPTIONS
   ----------------------------------------------------- */

.ent-feature-grid
.wp-block-column p {
  font-family:
    var(--ent-font-body, Inter, sans-serif);

  font-size: 16px;
  font-weight: 400;

  line-height: 1.65;

  color: #46544f;

  margin: 0 0 22px !important;
}


/* -----------------------------------------------------
   08 — FEATURE LINKS

   Supports Paragraph blocks containing links,
   whether directly inside Columns or nested
   inside Groups.
   ----------------------------------------------------- */

.ent-feature-grid
.wp-block-column p a {
  color: var(--ent-forest-dark, #09231d);

  font-family:
    var(--ent-font-body, Inter, sans-serif);

  font-size: 12px;
  font-weight: 700;

  line-height: 1.5;
  letter-spacing: 0.08em;

  text-transform: uppercase;
  text-decoration: none;

  border-bottom:
    1px solid var(--ent-rust, #bd7353);

  padding-bottom: 5px;

  transition: color 180ms ease;
}

.ent-feature-grid
.wp-block-column p a:hover {
  color: var(--ent-rust, #bd7353);
}


/* -----------------------------------------------------
   09 — FOUR-COLUMN CARD REFINEMENTS

   Keeps headings, descriptions and links
   consistent across accommodation cards.
   ----------------------------------------------------- */

.ent-feature-grid--4 .wp-block-image {
  aspect-ratio: 1.25 / 1;

  margin-bottom: 20px !important;
}

.ent-feature-grid--4 h3 {
  font-size: clamp(28px, 2.2vw, 36px);

  line-height: 1.05;

  margin-bottom: 12px !important;
}

.ent-feature-grid--4
.wp-block-column p {
  font-size: 15px;
  line-height: 1.6;

  margin-bottom: 18px !important;
}

/* Prevent overly narrow card text. */

.ent-feature-grid--4
.wp-block-column {
  overflow-wrap: normal;
  word-break: normal;
}

/* Place final link near the bottom of each card. */

.ent-feature-grid--4
.wp-block-column
> p:last-child,
.ent-feature-grid--4
.ent-stay-card
> p:last-child {
  margin-top: auto !important;
  margin-bottom: 0 !important;

  padding-top: 12px;
}


/* -----------------------------------------------------
   10 — TABLET

   Two-column layout for both variations.
   ----------------------------------------------------- */

@media (max-width: 1024px) {

  .ent-feature-grid {
    padding: 72px 32px;
  }

  .ent-feature-grid
  > .wp-block-columns,
  .ent-feature-grid--4
  > .wp-block-columns {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 48px 24px !important;
  }

  .ent-feature-grid--4
  .wp-block-image {
    aspect-ratio: 1.5 / 1;
  }

}


/* -----------------------------------------------------
   11 — MOBILE

   Single-column cards with generous spacing.
   ----------------------------------------------------- */

@media (max-width: 782px) {

  .ent-feature-grid {
    padding: 60px 24px;
  }

  .ent-feature-grid
  > .wp-block-columns,
  .ent-feature-grid--4
  > .wp-block-columns {
    grid-template-columns: 1fr;

    gap: 48px !important;
  }

  .ent-feature-grid
  .wp-block-image {
    aspect-ratio: 1.6 / 1;

    margin-bottom: 20px !important;
  }

  .ent-feature-grid h3,
  .ent-feature-grid--4 h3 {
    font-size: 32px;

    margin-bottom: 12px !important;
  }

  .ent-feature-grid
  .wp-block-column p {
    font-size: 15px;
    line-height: 1.6;
  }

}


/* -----------------------------------------------------
   12 — SMALL MOBILE
   ----------------------------------------------------- */

@media (max-width: 480px) {

  .ent-feature-grid {
    padding: 48px 20px;
  }

  .ent-feature-grid
  > .wp-block-columns {
    gap: 40px !important;
  }

  .ent-feature-grid
  .wp-block-image {
    aspect-ratio: 1.45 / 1;
  }

}