/* iGenetix — Partners module supplemental CSS
 * Only covers effects Elementor cannot express natively (aspect-ratio media box,
 * hover overlay reveal, image zoom on ancestor hover, line clamping, sticky offset,
 * hero light bloom). Everything else — colours, spacing, radii, typography — is set
 * on the Elementor widgets themselves so it stays editable in the UI.
 */

/* ============================================================
   LISTING — card
   ============================================================ */
.ig-card {
  position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ig-card:hover { transform: translateY(-6px); }
.ig-card, .ig-card * { text-decoration: none; }
/* Card is an <a>; keep Astra/theme link colours out of it. */
.ig-card:hover .elementor-heading-title { color: inherit; }

.ig-card-image { position: relative; width: 100%; aspect-ratio: 4 / 3.2; overflow: hidden; }
.ig-card-image > .elementor-element { width: 100%; height: 100%; }
.ig-card-image > .elementor-element > .elementor-widget-container { width: 100%; height: 100%; }
.ig-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.ig-card:hover .ig-card-image img { transform: scale(1.05); }

.ig-card-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.85) 100%);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 20px;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.ig-card:hover .ig-card-overlay { opacity: 1; }
.ig-card-overlay .ig-arrow { display: inline-block; transition: transform .25s ease; }
.ig-card:hover .ig-card-overlay .ig-arrow { transform: translateX(4px); }

.ig-card-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ig-card-summary p { margin: 0; }

/* ============================================================
   SINGLE — hero
   ============================================================ */
.ig-hero { position: relative; overflow: hidden; }
.ig-hero::before {
  content: ""; position: absolute; top: -180px; right: -120px;
  width: 520px; height: 420px; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(63,103,156,.35), transparent 70%);
}
.ig-hero::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 32%);
}
.ig-hero > .e-con-inner, .ig-hero > .elementor-element { position: relative; z-index: 1; }

/* Definite height so the logo image can fill the tile. */
.ig-hero-logo { width: 132px; height: 132px; overflow: hidden; }
.ig-hero-logo > .elementor-element,
.ig-hero-logo > .elementor-element > .elementor-widget-container { width: 100%; height: 100%; }
.ig-hero-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) { .ig-hero-logo { width: 104px; height: 104px; } }

/* ============================================================
   SINGLE — line icons
   The icon set is stroke-based (fill="none"); Elementor fills uploaded SVGs
   with the icon colour by default, which turns them into solid blobs.
   ============================================================ */
/* Scoped to svg[fill="none"] on purpose: that attribute marks the uploaded
   stroke-based line icons, which Elementor would otherwise flood with the icon
   colour. Font Awesome brand glyphs (Instagram, TikTok, Facebook, ...) are solid
   paths with no fill attribute, so they keep their fill and render normally. */
.ig-single svg[fill="none"] { fill: none !important; }
.ig-single .elementor-icon svg[fill="none"],
.ig-single .elementor-icon-list-icon svg[fill="none"] { stroke: currentColor; }
.ig-single .elementor-social-icon svg[fill="none"] { stroke: #fff; }

/* Contact rows: 12px icon gutter, icon optically aligned to the first line. */
.ig-contact .elementor-icon-list-icon { width: 16px; margin-right: 12px; }

/* Section heads stay a single row at every width — Elementor stacks container
   children on mobile by default, which would drop the chip onto its own line. */
.ig-section-head {
  --flex-direction: row;
  --flex-wrap: nowrap;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.ig-section-icon {
  --width: 40px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

/* ============================================================
   SINGLE — body
   ============================================================ */
.ig-about p:last-child { margin-bottom: 0; }
.ig-about p { margin: 0 0 1em; }

.ig-facts {
  --display: grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

/* Let flex children shrink below their content width instead of overflowing. */
.ig-hero-inner > .e-con, .ig-main-grid > .e-con { min-width: 0; }

/* Empty social URLs render as bare anchors — don't show an empty circle. */
.ig-social .elementor-grid-item:has(a[href=""]),
.ig-social .elementor-grid-item:has(a:not([href])) { display: none; }

.ig-sidebar { position: sticky; top: 24px; align-self: flex-start; }
@media (max-width: 1024px) { .ig-sidebar { position: relative; top: 0; } }

.ig-contact .elementor-icon-list-item { align-items: flex-start; }
.ig-contact .elementor-icon-list-icon { margin-top: 2px; }
.ig-contact .elementor-icon-list-text { word-break: break-word; }

.ig-cta .elementor-button { width: 100%; }

/* ============================================================
   SINGLE — per-partner content area
   Sits under Company profile in the left column. Elementor-built content
   brings its own styling; these defaults only cover classic-editor content
   so it still reads correctly on the dark surface.
   ============================================================ */
.ig-post-content { color: rgba(255,255,255,.7); font-size: 16.5px; line-height: 1.75; }
.ig-post-content > :first-child { margin-top: 0; }
.ig-post-content > :last-child { margin-bottom: 0; }
.ig-post-content h2 { font-size: 24px; font-weight: 500; color: #fff; letter-spacing: -.01em; margin: 0 0 .6em; }
.ig-post-content h3 { font-size: 19px; font-weight: 500; color: #fff; margin: 1.4em 0 .5em; }
.ig-post-content p { margin: 0 0 1em; }
.ig-post-content a { color: #94BEF8; }
.ig-post-content a:hover { color: #345785; }
.ig-post-content ul, .ig-post-content ol { margin: 0 0 1em 1.2em; }
.ig-post-content img { max-width: 100%; height: auto; border-radius: 16px; }

/* Breadcrumb separator chevron sits optically centred with 13px text */
.ig-crumb-sep svg { display: block; }