/*
 * Supplementary rules layered on top of the original template's own
 * css/style.css (never edited directly, per the migration's own rule).
 * The original design used icon FONTS (Font Awesome <i>) sized via
 * font-size/color on their wrapping circles (.b-icon, .hf-icon, etc).
 * The CMS's Page Builder blocks store icon choices as Heroicon names
 * (an existing convention, not introduced by this pass), so the icon
 * renders as an inline <svg> instead of a font glyph. This makes that
 * svg inherit the same font-size/color sizing the wrapper already
 * defines, so it behaves like the icon font would have.
 */
.b-icon svg,
.hf-icon svg,
.service-icon svg,
.pf-icon svg,
.ci-icon svg,
.cert-card-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* Decorative leaf: replaces the original template's rough two-stroke
   outline with a complete leaf (outline, midrib and veins). Same
   placement and colouring rules as style.css's .leaf / .leaf-cta. */
.leaf {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23A9C6A0' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M100 8C150 42 174 98 152 148C138 180 114 192 100 194C86 192 62 180 48 148C26 98 50 42 100 8Z'/%3E%3Cpath d='M100 30Q104 112 100 194' stroke-width='4'/%3E%3Cpath d='M101 74Q122 66 138 52M101 74Q80 66 62 52M102 110Q128 101 152 86M102 110Q74 101 48 86M101 146Q124 138 144 126M101 146Q78 138 56 126' stroke-width='3.5'/%3E%3C/svg%3E");
}
.leaf-cta { transform: rotate(-16deg); }

/* =========================================================
   GALLERY — title overlay, tag/title filtering (extends the
   original template's .gallery-item / .lightbox rules in
   style.css, never editing that file directly).
   ========================================================= */

/* Permanent gradient + label for items with a title, distinct
   from .gallery-item::after's existing hover-only tint so plain
   (untitled / certificate) items keep their original behaviour. */
.gallery-item-has-title { position: relative; }
.gallery-item-has-title::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,59,54,.82) 0%, rgba(11,59,54,.15) 55%, transparent 75%);
  z-index: 1;
  pointer-events: none;
}
.gallery-item-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 28px 16px 14px;
  color: var(--white);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}

/* Loading placeholder - script.js adds .is-loading to a grid tile until
   its image arrives. Images without width/height attributes get a 4:3
   slot (their real ratio takes over once loaded), and height:auto keeps
   images that do carry those attributes from being stretched. */
.gallery-item img { height: auto; transition: transform .35s ease, opacity .4s ease; }
.gallery-item.is-loading {
  background: linear-gradient(100deg, var(--cream-2) 35%, var(--cream) 50%, var(--cream-2) 65%) 0 0 / 300% 100%;
  animation: galleryShimmer 1.4s linear infinite;
}
.gallery-item.is-loading img { opacity: 0; }
.gallery-item.is-loading img:not([width]) { aspect-ratio: 4 / 3; }
@keyframes galleryShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.lightbox img { transition: opacity .2s ease; }
.lightbox.is-loading img { opacity: 0; }
.lightbox.is-loading::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: lightboxSpin .8s linear infinite;
}
@keyframes lightboxSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .gallery-item.is-loading { animation: none; }
}

/* Items hidden by the tag/title filter script - kept out of layout
   entirely so the lightbox's "currently visible set" logic (which
   checks this exact class) and the grid's masonry columns agree. */
.gallery-item-filtered { display: none; }

.gallery-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 26px;
}
.gallery-search {
  width: 100%;
  max-width: 360px;
  padding: 10px 16px;
  border: 1px solid var(--border-light);
  border-radius: 50px;
  background: var(--white);
  font: inherit;
  color: var(--text-dark);
}
.gallery-search:focus { outline: none; border-color: var(--orange); }
.gallery-filter-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.gallery-filter-btn {
  padding: 8px 20px;
  border-radius: 50px;
  border: 1px solid var(--border-light);
  background: var(--white);
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gallery-filter-btn:hover { border-color: var(--orange); }
.gallery-filter-btn.is-active {
  background: var(--primary-green);
  border-color: var(--primary-green);
  color: var(--white);
}