/* ==========================================================================
   DELINA GROUP — RESPONSIVE REFINEMENTS
   Loaded last. Mobile is designed here, not merely collapsed: layouts are
   rebuilt for small screens rather than left to stack arbitrarily.

   Breakpoints
     1199px  tablet landscape — desktop nav gives way to the drawer
      1023px  tablet portrait  — two-column sections become one
       767px  large phone      — card grids become swipeable rails
       479px  small phone      — tightened spacing and type
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. GLOBAL OVERFLOW GUARDS
   Nothing should ever cause a horizontal scrollbar.
   -------------------------------------------------------------------------- */

html { overflow-x: hidden; }

img, svg, video, iframe, table, pre, blockquote { max-width: 100%; }

/* Long unbroken strings (URLs, emails) must wrap rather than push the layout. */
.dg-prose, .dg-card__text, .dg-office address, .dg-footer__contact,
.dg-reach__rows dd, .dg-job h3, .dg-media-card__body {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Editor tables scroll inside their own box instead of widening the page. */
.dg-prose table { display: block; overflow-x: auto; white-space: nowrap; }

/* Decorative motifs must never create scroll width. */
.dg-motif, .dg-hero__africa, .dg-hero__dots,
.dg-banner__africa, .dg-page-hero__africa,
.dg-final-cta__africa, .dg-dark-section__africa { max-width: 100%; }

/* --------------------------------------------------------------------------
   1. SWIPEABLE RAILS
   On phones, card grids become horizontally scrollable, snap-aligned rails —
   a familiar mobile pattern and far better than a column of full-width cards.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.dg-biz-grid,
	.dg-news-grid,
	.dg-rail {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: minmax(268px, 78vw);
		gap: 0.875rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;

		/* Bleed to the screen edges so the rail reads as scrollable. */
		margin-inline: calc(var(--dg-gutter) * -1);
		padding-inline: var(--dg-gutter);
		padding-bottom: 0.5rem;
	}
	.dg-biz-grid::-webkit-scrollbar,
	.dg-news-grid::-webkit-scrollbar,
	.dg-rail::-webkit-scrollbar { display: none; }

	.dg-biz-grid > *,
	.dg-news-grid > *,
	.dg-rail > * { scroll-snap-align: start; }

	/* Hint that there is more to the right. */
	.dg-swipe-hint {
		display: flex;
		align-items: center;
		gap: 0.4rem;
		margin: 0.75rem 0 0;
		font-size: 0.6875rem;
		font-weight: var(--dg-fw-bold);
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--dg-ink-faint);
	}
}

@media (min-width: 768px) {
	.dg-swipe-hint { display: none; }
}

/* --------------------------------------------------------------------------
   2. HERO
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.dg-hero { padding-top: clamp(2.5rem, 6vw, 4rem); }
	.dg-hero__inner { gap: clamp(2rem, 6vw, 3rem); }
	.dg-hero__lead { max-width: none; }

	/* The Africa motif shifts behind the copy and fades further back. */
	.dg-hero__africa { right: -20%; width: min(560px, 90vw); opacity: 0.045; }
	.dg-hero__dots { display: none; }
}

@media (max-width: 767px) {
	/*
	 * Rebuild the 6 × 6 collage as a simple three-row composition. At phone
	 * width the desktop mosaic would render each tile at roughly 40px tall,
	 * which reads as noise rather than photography.
	 */
	.dg-hero__collage {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
		gap: 0.625rem;
	}
	.dg-hero__tile { border-radius: var(--dg-r-md); }
	.dg-hero__tile--a { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16 / 10; }
	.dg-hero__tile--b { grid-column: 1 / 2; grid-row: auto; aspect-ratio: 1; }
	.dg-hero__tile--c { grid-column: 2 / 3; grid-row: auto; aspect-ratio: 1; }
	.dg-hero__tile--d { grid-column: 1 / 2; grid-row: auto; aspect-ratio: 1; }
	.dg-hero__tile--e { grid-column: 2 / 3; grid-row: auto; aspect-ratio: 1; }

	.dg-hero__strip {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
		margin-top: 2rem;
		padding-top: 1.5rem;
	}
	.dg-hero__strip-item strong { font-size: 1.25rem; }

	/* Full-width buttons read better than two cramped pills. */
	.dg-hero .dg-btn-row { flex-direction: column; align-items: stretch; }
	.dg-hero .dg-btn { width: 100%; }
}

@media (max-width: 479px) {
	.dg-hero__tile--d, .dg-hero__tile--e { display: none; }
	.dg-hero__collage { gap: 0.5rem; }
}

/* --------------------------------------------------------------------------
   3. WHO WE ARE MOSAIC
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.dg-mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
		gap: 0.625rem;
	}
	.dg-mosaic__item { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 1; }
	.dg-mosaic__item:nth-child(1) { grid-column: 1 / 3 !important; aspect-ratio: 16 / 10; }
}

@media (max-width: 479px) {
	.dg-mosaic__item:nth-child(n + 5) { display: none; }
}

/* --------------------------------------------------------------------------
   4. REGIONAL MAP
   -------------------------------------------------------------------------- */

@media (max-width: 959px) {
	.dg-reach__inner { gap: 2rem; }
	.dg-map__svg { max-height: 62vh; }
	.dg-reach__panel { min-height: 0; }
}

@media (max-width: 767px) {
	/* A tall portrait map eats the whole screen — cap it and centre. */
	.dg-map__svg { max-height: 52vh; }
	.dg-map__country { stroke-width: 2; }

	/* Chips become the primary control on touch; make them comfortable. */
	.dg-reach__chips {
		gap: 0.4rem;
		margin-bottom: 1.25rem;
	}
	.dg-chip {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		padding-inline: 0.9rem;
	}
	.dg-reach__panel { padding: 1.25rem; }
}

/* --------------------------------------------------------------------------
   5. SECTIONS & CARDS
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.dg-banner { padding: 2rem 1.5rem; border-radius: var(--dg-r-xl); }
	.dg-banner__africa { right: -14%; width: 62%; opacity: 0.08; }
	.dg-banner .dg-btn-row { flex-direction: column; align-items: stretch; }

	.dg-final-cta .dg-btn-row { flex-direction: column; align-items: stretch; }
	.dg-final-cta p { font-size: var(--dg-fs-body); }

	.dg-csr__list { grid-template-columns: minmax(0, 1fr); }
	.dg-csr__item { padding: 1rem; }

	.dg-gallery { gap: 0.5rem; }

	.dg-chairman { gap: 1.75rem; }
	.dg-chairman__photo { aspect-ratio: 4 / 3; max-width: 420px; }

	.dg-timeline { padding-left: 1.75rem; }
	.dg-timeline__item::before { left: -1.75rem; width: 14px; height: 14px; }

	.dg-job { padding: 1.25rem; }
	.dg-job .dg-btn { width: 100%; }

	.dg-stat { padding: 1.125rem; }
	.dg-stat__value { font-size: 1.75rem; }

	.dg-ticks--2col { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 479px) {
	:root { --dg-section-y: 3.25rem; --dg-section-y-sm: 2.5rem; }

	.dg-card { padding: 1.25rem; }
	.dg-card__icon { width: 52px; height: 52px; margin-bottom: 1rem; }
	.dg-section-head { margin-bottom: 2rem; }
}

/* --------------------------------------------------------------------------
   6. HEADER & DRAWER
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	/* The mega panel is drawer-only below this width. */
	.dg-mega { display: none; }
	.no-js .dg-mega { display: none; }
}

/*
 * The supplied Delina lockup is a wide horizontal mark (roughly 3.5:1). Between
 * 1200 and 1400px it competes with eight nav items plus the CTA, so the nav
 * tightens rather than wrapping.
 */
@media (min-width: 1200px) and (max-width: 1399px) {
	.dg-navbar { gap: 1rem; }
	.dg-nav__link { padding-inline: 0.6rem; font-size: 0.8125rem; }
	.dg-nav__link::after { left: 0.6rem; right: 0.6rem; }
	.dg-logo img { max-height: 44px; }
	.dg-header__actions .dg-btn { padding-inline: 1.1rem; font-size: 0.6875rem; }
}

@media (max-width: 767px) {
	.dg-drawer__body { padding-bottom: 3rem; }
	.dg-mnav__link, .dg-mnav__toggle { min-height: 52px; font-size: 1rem; }
	.dg-mnav__sub a { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.dg-footer__top { padding-block: 3rem; }
	.dg-footer__grid { gap: 2.25rem; }
	.dg-footer__intro { max-width: none; }
	.dg-footer__motif { opacity: 0.05; right: -22%; }

	.dg-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.875rem;
		text-align: left;
	}
	.dg-footer__legal { gap: 1rem 1.25rem; }

	/* Footer links are the main navigation on phones — give them real targets. */
	.dg-footer__list a,
	.dg-footer__legal a { min-height: 32px; display: inline-flex; align-items: center; }
}

/* --------------------------------------------------------------------------
   8. FORMS
   -------------------------------------------------------------------------- */

@media (max-width: 599px) {
	.dg-form__row { grid-template-columns: minmax(0, 1fr); }
	.dg-form .dg-btn { width: 100%; }
	/* 16px minimum prevents iOS Safari zooming on focus. */
	.dg-input, .dg-select, .dg-textarea { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   9. TOUCH DEVICES
   Hover-lift effects are meaningless without a pointer and can leave a card
   stuck in its hover state after a tap.
   -------------------------------------------------------------------------- */

@media (hover: none) {
	.dg-card--hover:hover { transform: none; box-shadow: var(--dg-shadow-sm); }
	.dg-mosaic__item:hover img,
	.dg-media-card:hover .dg-media-card__media img,
	.dg-gallery__item:hover img { transform: none; }
	.dg-btn:hover { transform: none; }
	.dg-marquee__item { filter: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   10. LANDSCAPE PHONES
   -------------------------------------------------------------------------- */

@media (max-height: 520px) and (orientation: landscape) {
	.dg-hero { padding-block: 2.5rem 4rem; }
	.dg-drawer__body { padding-block: 0.5rem 1.5rem; }
	.dg-map__svg { max-height: 80vh; }
}

/* --------------------------------------------------------------------------
   11. LARGE SCREENS
   -------------------------------------------------------------------------- */

@media (min-width: 1600px) {
	:root { --dg-gutter: 4rem; }
}