/* Skeleton loader system — shimmer placeholders during page initialisation. */

@keyframes skel-shimmer {
	to { transform: translateX( 100% ); }
}

@keyframes skel-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: .5; }
}

/* ─── Colour tokens ──────────────────────────────────────────────────────────── */
:root {
	--skel-base:    #dde3ea;
	--skel-mid:     #e8ecf1;
	--skel-shine:   rgba( 255 255 255 / .62 );
	--skel-card-bg: #f4f6f9;
}

/* ─── Shared shimmer sweep (applied as ::after on every skeleton card) ────────── */
.page-skeleton .service-card::after,
.page-skeleton .homepage-service-card::after,
.page-skeleton .medical-aid-summary-card::after,
.page-skeleton .short-term-insurance__card::after,
.page-skeleton .corporate-health__packages-grid > article::after,
.page-skeleton .corporate-health__offering-grid > article::after,
.page-skeleton .services-directory__grid > article::after,
.page-skeleton .service-page__supporting-grid > article::after,
.page-skeleton .service-page__related-grid > article::after,
.page-skeleton .service-page__unit-grid > article::after,
.page-skeleton .homepage-why__card::after,
.page-skeleton .about-leader::after,
.page-skeleton .post-card::after,
.page-skeleton .faq-item::after,
.page-skeleton .community-photo-card::after,
.page-skeleton .search-results__item::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, transparent 0%, var( --skel-shine ) 50%, transparent 100% );
	transform: translateX( -100% );
	animation: skel-shimmer 1.55s ease-in-out infinite;
	z-index: 6;
	pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════════
   SERVICE CARD  (image → body: badge · icon+title · text · buttons)
   ════════════════════════════════════════════════════════════════════════════════ */
.page-skeleton .service-card {
	position: relative;
	overflow: hidden;
	min-height: 28rem;
}
.page-skeleton .service-card > * { visibility: hidden; }
.page-skeleton .service-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		/* image block */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 0 0 / 100% 12.5rem no-repeat,
		/* title */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 13.75rem / 58% 1.1rem no-repeat,
		/* text ×3 */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 15.35rem / 92% .75rem no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 16.35rem / 80% .75rem no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 17.35rem / 58% .75rem no-repeat,
		/* buttons */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 19.25rem / 8.5rem 2.25rem no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) calc( 1.25rem + 9.25rem ) 19.25rem / 8.5rem 2.25rem no-repeat,
		var( --skel-card-bg );
	z-index: 5;
}

/* ════════════════════════════════════════════════════════════════════════════════
   HOMEPAGE SERVICE CARD  (full-image overlay)
   ════════════════════════════════════════════════════════════════════════════════ */
.page-skeleton .homepage-service-card {
	position: relative;
	overflow: hidden;
	min-height: 18rem;
}
.page-skeleton .homepage-service-card > * { visibility: hidden; }
.page-skeleton .homepage-service-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		/* icon */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 1.25rem / 2.25rem 2.25rem no-repeat,
		/* title */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 4.25rem / 65% 1.1rem no-repeat,
		/* text */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 6rem / 85% .75rem no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 7rem / 70% .75rem no-repeat,
		/* button */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 9rem / 8rem 2.25rem no-repeat,
		#c8d0db;
	z-index: 5;
}

/* ════════════════════════════════════════════════════════════════════════════════
   MEDICAL AID SUMMARY CARD  (label · name · rate · price · facts · buttons)
   ════════════════════════════════════════════════════════════════════════════════ */
.page-skeleton .medical-aid-summary-card {
	position: relative;
	overflow: hidden;
	min-height: 26rem;
}
.page-skeleton .medical-aid-summary-card > * { visibility: hidden; }
.page-skeleton .medical-aid-summary-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.5rem 1.5rem  / 38% .7rem  no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.5rem 2.7rem  / 72% 1.3rem no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.5rem 4.5rem  / 52% .7rem  no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.5rem 5.65rem / 34% 1.9rem no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.5rem 9rem    / 27% 2.75rem no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) calc( 1.5rem + 29% ) 9rem / 27% 2.75rem no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) calc( 1.5rem + 58% ) 9rem / 27% 2.75rem no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.5rem 13.5rem / 92% .7rem  no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.5rem calc( 100% - 3.75rem ) / 44% 2.5rem no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) calc( 100% - 1.5rem - 44% ) calc( 100% - 3.75rem ) / 44% 2.5rem no-repeat,
		var( --skel-card-bg );
	z-index: 5;
}

/* ════════════════════════════════════════════════════════════════════════════════
   "WHY RUGARE" FEATURE CARDS  (icon · heading · text)
   ════════════════════════════════════════════════════════════════════════════════ */
.page-skeleton .homepage-why__card {
	position: relative;
	overflow: hidden;
	min-height: 12rem;
}
.page-skeleton .homepage-why__card > * { visibility: hidden; }
.page-skeleton .homepage-why__card::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		/* icon circle */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 1.25rem / 2.5rem 2.5rem no-repeat,
		/* heading */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 4.5rem  / 62% 1rem   no-repeat,
		/* text ×2 */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 6.25rem / 90% .75rem no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 7.25rem / 72% .75rem no-repeat,
		var( --skel-card-bg );
	z-index: 5;
}

/* ════════════════════════════════════════════════════════════════════════════════
   LEADERSHIP / TEAM CARDS  (photo · name · role · bio)
   ════════════════════════════════════════════════════════════════════════════════ */
.page-skeleton .about-leader {
	position: relative;
	overflow: hidden;
	min-height: 20rem;
}
.page-skeleton .about-leader > * { visibility: hidden; }
.page-skeleton .about-leader::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		/* photo */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 0 0 / 100% 14rem no-repeat,
		/* name */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1rem 15rem  / 65% 1.1rem  no-repeat,
		/* role */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1rem 16.5rem / 48% .8rem   no-repeat,
		/* bio ×2 */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1rem 18rem   / 92% .7rem   no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1rem 19rem   / 78% .7rem   no-repeat,
		var( --skel-card-bg );
	z-index: 5;
}

/* ════════════════════════════════════════════════════════════════════════════════
   POST / BLOG / NEWS CARDS  (image · date · title · excerpt · link)
   ════════════════════════════════════════════════════════════════════════════════ */
.page-skeleton .post-card {
	position: relative;
	overflow: hidden;
	min-height: 22rem;
}
.page-skeleton .post-card > * { visibility: hidden; }
.page-skeleton .post-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		/* image */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 0 0 / 100% 10rem no-repeat,
		/* date */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 11.25rem / 32% .7rem  no-repeat,
		/* title */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 12.5rem  / 78% 1.1rem no-repeat,
		/* excerpt ×2 */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 14.25rem / 92% .75rem no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 15.25rem / 68% .75rem no-repeat,
		/* read link */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 17rem    / 6rem 1rem  no-repeat,
		var( --skel-card-bg );
	z-index: 5;
}

/* ════════════════════════════════════════════════════════════════════════════════
   FAQ ITEMS  (collapsed question row + toggle icon)
   ════════════════════════════════════════════════════════════════════════════════ */
.page-skeleton .faq-item {
	position: relative;
	overflow: hidden;
	min-height: 3.75rem;
}
.page-skeleton .faq-item > * { visibility: hidden; }
.page-skeleton .faq-item::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		/* question text */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 50% / 68% 1rem no-repeat,
		/* toggle icon */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) calc( 100% - 1.25rem ) 50% / 1.25rem 1.25rem no-repeat,
		var( --skel-card-bg );
	background-position: 1.25rem center, calc( 100% - 1.25rem ) center;
	z-index: 5;
}

/* ════════════════════════════════════════════════════════════════════════════════
   COMMUNITY GALLERY PHOTO CARDS  (full-bleed image tile)
   ════════════════════════════════════════════════════════════════════════════════ */
.page-skeleton .community-photo-card {
	position: relative;
	overflow: hidden;
	min-height: 14rem;
}
.page-skeleton .community-photo-card > * { visibility: hidden; }
.page-skeleton .community-photo-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var( --skel-base );
	z-index: 5;
}

/* ════════════════════════════════════════════════════════════════════════════════
   SEARCH RESULT ITEMS  (badge · title · excerpt)
   ════════════════════════════════════════════════════════════════════════════════ */
.page-skeleton .search-results__item {
	position: relative;
	overflow: hidden;
	min-height: 7rem;
	padding: 1.25rem;
}
.page-skeleton .search-results__item > * { visibility: hidden; }
.page-skeleton .search-results__item::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		/* badge */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 1.25rem  / 5rem .8rem  no-repeat,
		/* title */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 2.75rem  / 72% 1.1rem  no-repeat,
		/* excerpt ×2 */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 4.5rem   / 92% .75rem  no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 5.5rem   / 66% .75rem  no-repeat,
		var( --skel-card-bg );
	z-index: 5;
}

/* ════════════════════════════════════════════════════════════════════════════════
   GENERIC FLAT ICON-CARDS  (short-term insurance, related, supporting, unit, packages)
   ════════════════════════════════════════════════════════════════════════════════ */
.page-skeleton .short-term-insurance__card,
.page-skeleton .corporate-health__packages-grid > article,
.page-skeleton .corporate-health__offering-grid > article,
.page-skeleton .services-directory__grid > article,
.page-skeleton .service-page__supporting-grid > article,
.page-skeleton .service-page__related-grid > article,
.page-skeleton .service-page__unit-grid > article {
	position: relative;
	overflow: hidden;
	min-height: 14rem;
}

.page-skeleton .short-term-insurance__card > *,
.page-skeleton .corporate-health__packages-grid > article > *,
.page-skeleton .corporate-health__offering-grid > article > *,
.page-skeleton .services-directory__grid > article > *,
.page-skeleton .service-page__supporting-grid > article > *,
.page-skeleton .service-page__related-grid > article > *,
.page-skeleton .service-page__unit-grid > article > * { visibility: hidden; }

.page-skeleton .short-term-insurance__card::before,
.page-skeleton .corporate-health__packages-grid > article::before,
.page-skeleton .corporate-health__offering-grid > article::before,
.page-skeleton .services-directory__grid > article::before,
.page-skeleton .service-page__supporting-grid > article::before,
.page-skeleton .service-page__related-grid > article::before,
.page-skeleton .service-page__unit-grid > article::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		/* icon */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 1.5rem  / 2.75rem 2.75rem no-repeat,
		/* heading */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 5rem    / 62% 1rem   no-repeat,
		/* text ×2 */
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 6.5rem  / 90% .75rem no-repeat,
		linear-gradient( var( --skel-base ), var( --skel-base ) ) 1.25rem 7.5rem  / 74% .75rem no-repeat,
		var( --skel-card-bg );
	z-index: 5;
}

/* ════════════════════════════════════════════════════════════════════════════════
   HERO SECTIONS  (pulsing dark overlay while image/content loads)
   ════════════════════════════════════════════════════════════════════════════════ */
.page-skeleton .homepage-hero,
.page-skeleton .page-hero,
.page-skeleton .service-page__hero {
	position: relative;
}
.page-skeleton .homepage-hero > *,
.page-skeleton .page-hero > *,
.page-skeleton .service-page__hero > * { visibility: hidden; }
.page-skeleton .homepage-hero::before,
.page-skeleton .page-hero::before,
.page-skeleton .service-page__hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 135deg, #0d2e47, #1c4a6e );
	animation: skel-pulse 1.8s ease-in-out infinite;
	z-index: 1;
}

/* ════════════════════════════════════════════════════════════════════════════════
   PARTNER LOGO STRIP  (logo image tiles)
   ════════════════════════════════════════════════════════════════════════════════ */
.page-skeleton .homepage-partners__logos > * {
	position: relative;
	overflow: hidden;
	min-height: 4rem;
	visibility: hidden;
}
.page-skeleton .homepage-partners__logos > *::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var( --skel-base );
	z-index: 5;
	visibility: visible;
}
.page-skeleton .homepage-partners__logos > *::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, transparent 0%, var( --skel-shine ) 50%, transparent 100% );
	transform: translateX( -100% );
	animation: skel-shimmer 1.55s ease-in-out infinite;
	z-index: 6;
	visibility: visible;
}

/* ════════════════════════════════════════════════════════════════════════════════
   LAZY IMAGE SKELETON  (added by JS to image containers while src loads)
   ════════════════════════════════════════════════════════════════════════════════ */
.img-loading {
	position: relative;
	background-color: var( --skel-base );
	overflow: hidden;
}
.img-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, transparent 0%, var( --skel-shine ) 50%, transparent 100% );
	transform: translateX( -100% );
	animation: skel-shimmer 1.55s ease-in-out infinite;
}
.img-loading img {
	opacity: 0;
	transition: opacity .35s ease;
}

/* ════════════════════════════════════════════════════════════════════════════════
   FADE-IN TRANSITION  (all skeleton targets fade from skeleton → content)
   ════════════════════════════════════════════════════════════════════════════════ */
.service-card,
.homepage-service-card,
.medical-aid-summary-card,
.homepage-why__card,
.about-leader,
.post-card,
.faq-item,
.community-photo-card,
.search-results__item,
.short-term-insurance__card,
.corporate-health__packages-grid > article,
.corporate-health__offering-grid > article,
.services-directory__grid > article,
.service-page__supporting-grid > article,
.service-page__related-grid > article,
.service-page__unit-grid > article,
.homepage-hero,
.page-hero,
.service-page__hero {
	transition: opacity .3s ease;
}