/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/


/* =====================================================================
 * Karri Forest Motel - custom CSS
 * Paste into Appearance > Customize > Additional CSS (or the child
 * theme's style.css), replacing any older copies of these rules.
 * ===================================================================== */


/* ---------- 1. Room features row  [kfm_room_features] ---------- */

.kfm-room-features {
  --kfm-icon: #2c4a3b;        /* forest green line colour */
  --kfm-icon-fill: #c8794f;   /* copper accent on pillows, heads, shower */
  --kfm-badge: #f1ece2;       /* soft cream circle behind each icon */
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  list-style: none;
  margin: 0 0 1.75em;
  padding: 0;
}
.kfm-room-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.kfm-room-feature__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--kfm-badge);
  color: var(--kfm-icon);
}
.kfm-room-feature__icon .kfm-fill {
  fill: var(--kfm-icon-fill);
  fill-opacity: .55;
}
.kfm-room-feature__text {
  font-size: 15px;
  line-height: 1.35;
}
@media (max-width: 600px) {
  .kfm-room-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
  }
  .kfm-room-feature__icon {
    width: 42px;
    height: 42px;
  }
}


/* ---------- 2. Room gallery grid  [kfm_room_gallery] ---------- */

.kfm-gallery {
  display: grid;
  gap: 16px;
  /* 3 photos across on desktop, 2 on tablets, 1 on phones */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
.kfm-gallery__item {
  position: relative;
  margin: 0;
}
.kfm-gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}


/* ---------- 3. Captions on the photos (room gallery + Meow Gallery) ---------- */

.kfm-gallery__item figcaption,
.kfm-photo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  pointer-events: none;
}
.kfm-has-caption {
  position: relative;
  display: block;
}

/* Meow Gallery only showed its own captions on hover - keep them visible. */
.mgl-gallery figcaption,
.mgl-gallery .mgl-caption {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}


/* ---------- 4. Caption bar inside the lightbox (baguetteBox) ---------- */

#baguetteBox-overlay .full-image figcaption {
  background: rgba(0, 0, 0, .55);
  font-size: 15px;
  padding: 8px 12px;
}