/* Sunshine magazines: "The Collection" grid and edition pages. Colours and fonts come from the Elementor kit
   (post 17) through its CSS variables, with the Figma values as fallbacks.
   Link colours carry !important: the kit colours a:not(…) at a specificity no class selector beats. */

.slm-grid,
.slm-single {
	--slm-navy: var(--e-global-color-primary, #091e2a);
	--slm-aqua: var(--e-global-color-secondary, #2ca9e1);
	--slm-text: var(--e-global-color-text, #123f59);
	--slm-grey: var(--e-global-color-ssgrey, #ecf1f3);
	--slm-grad: linear-gradient(270deg, var(--e-global-color-ssgradstart, #ffba30) 19%, var(--e-global-color-ssgradend, #d5771b) 100%);
	--slm-head: var(--e-global-typography-primary-font-family, "termina"), sans-serif;
	--slm-body: var(--e-global-typography-text-font-family, "mundial"), sans-serif;
	--slm-top: 81px; /* site header height; the header overlays the first section */
	--slm-gutter: 44px; /* matches the header logo inset */
}

/* ---------------------------------------------------------------- grid + cards */

.slm-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
	align-items: start;
}
@media (max-width: 1199px) { .slm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 899px)  { .slm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px)  { .slm-grid { grid-template-columns: minmax(0, 1fr); } }

.slm-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 8px 8px 16px;
	background: #fff;
	border-radius: 12px;
}
.slm-card--soon { padding-bottom: 8px; }
@media (max-width: 767px) { .slm-single { --slm-gutter: 16px; } }
@media (max-width: 559px) { .slm-card--soon { display: none; } }

.slm-card__cover {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	aspect-ratio: 374 / 504;
	padding: 16px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--slm-grey);
}
.slm-card--soon .slm-card__cover { justify-content: flex-end; }
.slm-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
a.slm-card__cover:hover .slm-card__img,
a.slm-card__cover:focus-visible .slm-card__img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .slm-card__img { transition: none; } }

.slm-badge,
.slm-card--soon span {
	position: relative;
	font-family: var(--slm-head);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	text-transform: uppercase;
}
.slm-badge {
	padding: 4px 8px;
	border-radius: 4px;
	background: var(--slm-aqua);
	color: #fff;
}
.slm-card--soon span { color: var(--slm-text); }

.slm-card__meta {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0 12px;
}
.slm-grid .slm-card__title {
	margin: 0;
	font-family: var(--slm-head);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	text-transform: uppercase;
}
.slm-grid .slm-card__title a { color: var(--slm-navy) !important; text-decoration: none; }
.slm-grid .slm-card__text {
	margin: -4px 0 0;
	font-family: var(--slm-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	color: var(--slm-text);
	text-wrap: pretty;
}

.slm-grid .slm-btn,
.slm-single .slm-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 6px 6px 12px;
	border: 1px solid var(--slm-grey);
	border-radius: 4px;
	font-family: var(--slm-head);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--slm-text) !important;
	text-decoration: none;
}
.slm-grid .slm-btn:hover, .slm-grid .slm-btn:focus-visible { border-color: var(--slm-text); color: var(--slm-text) !important; }
.slm-btn__icon {
	display: flex;
	padding: 6px;
	border-radius: 2px;
	background: var(--slm-grad);
}
.slm-btn__icon img { display: block; width: 14px; height: 14px; }

/* ---------------------------------------------------------------- edition page */

.slm-single { background: var(--slm-grey); color: var(--slm-text); }
.slm-single .slm-about p,
.slm-single .slm-hero p { font-family: var(--slm-body); font-weight: 300; font-size: 18px; line-height: 1.5; }

.slm-single .slm-back {
	display: inline-block;
	font-family: var(--slm-head);
	font-size: 14px;
	text-transform: uppercase;
	color: inherit !important;
	text-decoration: none;
	opacity: .8;
}
.slm-single .slm-back::before { content: "\2190\00a0"; }
.slm-single .slm-back:hover, .slm-single .slm-back:focus-visible { opacity: 1; color: inherit !important; }

.slm-eyebrow.slm-eyebrow {
	margin: 0;
	font-family: var(--slm-head);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--slm-aqua);
}

/* reader layout: cover + intro on navy, flipbook below */
.slm-hero {
	display: grid;
	grid-template-columns: minmax(240px, 420px) minmax(0, 720px);
	gap: 64px;
	align-items: center;
	padding: calc(var(--slm-top) + 72px) max(var(--slm-gutter), calc((100% - 1680px) / 2)) 96px;
	background: var(--slm-navy);
	color: #fff;
}
.slm-hero__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.slm-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.slm-single .slm-hero__title {
	margin: 0;
	font-family: var(--slm-head);
	font-weight: 600;
	font-size: clamp(36px, 5vw, 72px);
	line-height: 1.05;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: #fff;
}
.slm-single .slm-hero__desc p { margin: 0 0 12px; color: rgba(255, 255, 255, .85); }
.slm-single .slm-btn--solid { background: #fff; border-color: #fff; color: var(--slm-navy) !important; padding-left: 16px; }
.slm-single .slm-btn--solid:hover, .slm-single .slm-btn--solid:focus-visible { background: var(--slm-grey); color: var(--slm-navy) !important; }
@media (max-width: 899px) {
	.slm-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: calc(var(--slm-top) + 32px); padding-bottom: 56px; }
	.slm-hero__cover { max-width: 320px; }
}

.slm-reader { padding: 64px max(var(--slm-gutter), calc((100% - 1680px) / 2)); scroll-margin-top: var(--slm-top); }
.slm-reader__frame {
	display: block;
	width: 100%;
	height: min(88vh, 960px);
	border: 0;
	border-radius: 12px;
	background: #fff;
}
@media (max-width: 899px) { .slm-reader { padding: 24px 0; } .slm-reader__frame { height: 80svh; border-radius: 0; } }

/* immersive layout: flipbook fills the screen under the header */
.slm-single--immersive .slm-bar {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: calc(var(--slm-top) + 16px) max(var(--slm-gutter), calc((100% - 1680px) / 2)) 16px;
	background: var(--slm-navy);
	color: #fff;
}
.slm-single .slm-bar__title {
	flex: 1;
	margin: 0;
	font-family: var(--slm-head);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #fff;
}
.slm-single .slm-link { font-family: var(--slm-head); font-size: 14px; text-transform: uppercase; color: #fff !important; }
.slm-single .slm-link:hover, .slm-single .slm-link:focus-visible { color: var(--slm-aqua) !important; }
.slm-single--immersive .slm-reader { padding: 0; background: var(--slm-navy); }
.slm-single--immersive .slm-reader__frame { height: calc(100svh - var(--slm-top) - 62px); border-radius: 0; }
.slm-about { padding: 72px max(var(--slm-gutter), calc((100% - 1680px) / 2)); }
.slm-about__text { max-width: 760px; }
.slm-about__text .slm-eyebrow { margin-bottom: 16px; }
@media (max-width: 599px) { .slm-single--immersive .slm-bar { flex-wrap: wrap; gap: 8px 16px; } .slm-single .slm-bar__title { flex-basis: 100%; order: 2; } }

/* more editions */
.slm-more { padding: 24px max(var(--slm-gutter), calc((100% - 1680px) / 2)) 120px; }
.slm-single .slm-more__title {
	margin: 0 0 40px;
	font-family: var(--slm-head);
	font-weight: 600;
	font-size: clamp(28px, 3vw, 44px);
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--slm-navy);
}