/* =====================================================================
   FSDC Aerosolutions — image fitting layer
   =====================================================================
   Photographs arrive in mixed aspect ratios (3:2 camera frames, 4:3 phone
   frames, square carousel art, product cut-outs on white). Dropping those
   into fixed-ratio containers without a rule produces the two failures seen
   across the site: subjects cropped through the middle, and small cut-outs
   stretched to fill a wide box.

   The rules below give every image container a defined behaviour:

     cover   — photographs that should fill the frame edge to edge
     contain — product cut-outs and diagrams that must never be cropped
     top/centre/bottom focus — where cover crops, keep the subject

   Loaded site-wide from header.php, after main.css.
   ===================================================================== */

/* ---------- 1. Baseline ---------- */
img {
  max-width: 100%;
  height: auto;
}
/* NOTE: do not add `img[width][height] { height: auto }` here. Two attribute
   selectors out-specify the container rules below, which stops images from
   filling fixed-ratio boxes and leaves a gap under the photo. */

/* ---------- 2. Utilities ---------- */
.img-cover,
.img-contain {
  display: block;
  width: 100%;
  height: 100%;
}
.img-cover { object-fit: cover; object-position: center; }
.img-contain { object-fit: contain; object-position: center; }

.img-focus-top    { object-position: center 22% !important; }
.img-focus-bottom { object-position: center 78% !important; }
.img-focus-left   { object-position: 22% center !important; }
.img-focus-right  { object-position: 78% center !important; }

/* A framed box that never crops its contents — for cut-outs and diagrams. */
.img-frame {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #f4f8fa 0%, #e8f1f5 100%);
  border-radius: 12px;
  overflow: hidden;
  padding: 18px;
}
.img-frame img { width: 100%; height: 100%; object-fit: contain; }
.img-frame--dark { background: linear-gradient(160deg, #0b2337 0%, #071626 100%); }

/* ---------- 3. Known containers ---------- */

/* Homepage recent-event cards */
.previous-event-grid .event-image { background: #071626; }
.previous-event-grid .event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Event register thumbnails, related-story rails, blog cards */
.evx-thumb img,
.ev-rel__img img,
.gal-item img,
.ev-gallery img,
.ev-gal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Article figures: never crop, cap the height instead */
.ev-figure img {
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: cover;
  object-position: center;
}

/* Legacy theme cards — these were built for 4:3 stock and receive 16:9 photos */
.gt-news-image img,
.gt-news-card-items-4 .gt-news-image img,
.gt-team-image img,
.gt-service-card-items .gt-thumb img,
.gt-details-image img,
.gt-service-details-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.gt-news-image,
.gt-team-image,
.gt-service-card-items .gt-thumb {
  overflow: hidden;
  background: #071626;
}

/* Product cut-outs photographed on white must not be cropped anywhere */
img[src*="super-mushak"],
img[src*="smk2"],
img[src*="FEEL TRUE FLIGHT"],
img[src*="/logo/"],
img[src*="favicon"] {
  object-fit: contain !important;
  background: transparent;
}

/* Decorative theme shapes keep their natural size */
.gt-flag-shape img,
.horse-shape img,
.gt-line-shape img,
.gt-bg-shape img,
.gt-about-shape img,
.gt-right-shape img {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* ---------- 4. Loading polish ---------- */
/* A tinted box behind every lazy image removes the white flash and the
   layout shift while the file downloads. */
.ev-rel__img,
.evx-thumb,
.gal-item,
.ev-gal figure,
.ev-gallery figure {
  background-color: #0b2337;
  background-image: linear-gradient(110deg, rgba(255, 255, 255, .04) 8%, rgba(255, 255, 255, .09) 18%, rgba(255, 255, 255, .04) 33%);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .ev-rel__img, .evx-thumb, .gal-item {
    animation: img-shimmer 2.2s linear infinite;
  }
  .ev-rel__img img, .evx-thumb img, .gal-item img { position: relative; z-index: 1; }
  @keyframes img-shimmer {
    to { background-position-x: -200%; }
  }
}

/* ---------- 5. Safety ---------- */
/* Nothing may push the document wider than the viewport. */
img, svg, video, iframe, canvas, table { max-width: 100%; }