/* ==========================================================================
   Siki Wild Safaris — homepage sections
   ========================================================================== */

/* Hero (rounded card inside the container) -------------------------------- */
.sk-hero-wrap { padding-top: 20px; }
.sk-hero {
	position: relative; min-height: 560px; border-radius: var(--sk-r-xl); overflow: hidden; color: #fff;
	display: flex; align-items: flex-end; background: var(--sk-brand-dark);
}
.sk-hero__img, .sk-hero__graphic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sk-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24, 20, 12, .72) 0%, rgba(24, 20, 12, .42) 45%, rgba(24, 20, 12, 0) 75%), linear-gradient(0deg, rgba(24, 20, 12, .6) 0%, rgba(24, 20, 12, 0) 55%); }
.sk-hero--graphic .sk-hero__overlay { background: linear-gradient(90deg, rgba(24, 20, 12, .45) 0%, rgba(24, 20, 12, 0) 60%); }
.sk-hero__content { position: relative; width: 100%; padding: 64px 64px 40px; }
.sk-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--sk-fs-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #F6C66A; }
.sk-hero__eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.sk-hero__title { margin-top: 12px; font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; max-width: 13ch; color: #fff; }
.sk-hero__text { margin-top: 14px; font-size: clamp(1rem, .95rem + .3vw, 1.125rem); max-width: 46ch; color: rgba(255, 255, 255, .92); }
.sk-hero .sk-search-wrap { margin-top: 28px; }
.sk-hero__micro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 16px; font-size: var(--sk-fs-xs); color: rgba(255, 255, 255, .82); }
.sk-hero__micro-label { font-weight: 600; color: #fff; }
.sk-hero__micro a { color: #fff; text-decoration: none; padding: 4px 12px; border-radius: var(--sk-r-pill); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
.sk-hero__micro a:hover { background: rgba(255, 255, 255, .26); }

@media (max-width: 1023px) {
	.sk-hero { min-height: 480px; }
	.sk-hero__content { padding: 44px 36px 32px; }
}
@media (max-width: 767px) {
	.sk-hero-wrap { padding-top: 12px; }
	.sk-hero { min-height: 480px; align-items: flex-end; border-radius: var(--sk-r-lg); }
	.sk-hero__content { padding: 28px 20px 22px; }
	.sk-hero__overlay { background: linear-gradient(180deg, rgba(24, 20, 12, .2) 0%, rgba(24, 20, 12, .55) 45%, rgba(24, 20, 12, .85) 100%); }
	.sk-hero__micro { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
	.sk-hero__micro::-webkit-scrollbar { display: none; }
}

/* Stats strip ----------------------------------------------------------------- */
.sk-stats-wrap { padding-top: 28px; }
.sk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sk-stat { position: relative; background: #fff; border: 1px solid var(--sk-border); border-radius: var(--sk-r-lg); padding: 24px 24px 22px; }
.sk-stat__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sk-brand-light); color: var(--sk-brand-dark); margin-bottom: 14px; }
.sk-stat__num { font-size: var(--sk-fs-stat); font-weight: 600; color: var(--sk-brand-dark); letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sk-stat__num--word { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.875rem); }
.sk-stat__label { margin-top: 8px; font-weight: 600; }
.sk-stat__text { margin-top: 4px; color: var(--sk-muted); font-size: var(--sk-fs-sm); line-height: 1.5; }
@media (max-width: 1023px) { .sk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
	.sk-stats { gap: 10px; }
	.sk-stat { padding: 16px; }
	.sk-stat__icon { width: 36px; height: 36px; margin-bottom: 10px; }
	.sk-stat__text { display: none; }
	.sk-stat__label { margin-top: 4px; font-size: var(--sk-fs-sm); }
}

/* Row spacing ------------------------------------------------------------------ */
.sk-row-section--featured { margin-top: 36px; }
@media (max-width: 767px) { .sk-row-section--featured { margin-top: 20px; } }

/* Help ---------------------------------------------------------------------- */
.sk-help__head { text-align: center; max-width: 660px; margin: 0 auto 44px; }
.sk-help__title { font-size: var(--sk-fs-h2-lg); color: var(--sk-brand-dark); }
.sk-help__text { margin-top: 12px; color: var(--sk-muted); }
.sk-helpgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.sk-help__card { text-align: center; display: flex; flex-direction: column; align-items: center; background: #fff; border: 1px solid var(--sk-border); border-radius: var(--sk-r-lg); padding: 28px 24px 26px; }
.sk-help__art { width: 200px; height: 160px; display: grid; place-items: center; background: var(--sk-surface); border-radius: 50%; }
.sk-help__card-title { margin-top: 22px; font-size: 1.375rem; }
.sk-help__card-text { margin: 10px 0 22px; color: var(--sk-muted); font-size: .9375rem; max-width: 34ch; }
.sk-help__card .sk-btn { margin-top: auto; }
@media (max-width: 1023px) { .sk-helpgrid { gap: 18px; } .sk-help__art { width: 160px; height: 128px; } .sk-help__art svg { width: 160px; height: 128px; } }
@media (max-width: 767px) {
	.sk-helpgrid { grid-template-columns: 1fr; gap: 16px; }
	.sk-help__head { margin-bottom: 28px; }
}

/* When to go -------------------------------------------------------------------- */
.sk-when__head { max-width: 640px; margin-bottom: 32px; }
.sk-when__title { font-size: var(--sk-fs-h2-lg); color: var(--sk-brand-dark); }
.sk-when__text { margin-top: 10px; color: var(--sk-muted); }
.sk-when { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.sk-when__month a {
	position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 170px; padding: 16px; border-radius: var(--sk-r-md);
	background: #fff; border: 1px solid var(--sk-border); color: var(--sk-text); text-decoration: none;
	transition: border-color var(--sk-dur) var(--sk-ease), box-shadow var(--sk-dur) var(--sk-ease), transform var(--sk-dur) var(--sk-ease);
}
.sk-when__month a:hover { border-color: var(--sk-accent); box-shadow: var(--sk-shadow-md); transform: translateY(-2px); }
.sk-when__name { font-weight: 600; font-size: 1.0625rem; color: var(--sk-brand-dark); }
.sk-when__tag { align-self: flex-start; padding: 2px 8px; border-radius: var(--sk-r-pill); font-size: 11px; font-weight: 600; background: var(--sk-brand-light); color: var(--sk-brand-dark); }
.sk-when__tag--peak { background: var(--sk-accent-light); color: var(--sk-accent-dark); }
.sk-when__tag--green { background: #E3ECCF; color: #3B4F17; }
.sk-when__note { font-size: var(--sk-fs-xs); color: var(--sk-muted); line-height: 1.5; }
.sk-when__go { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--sk-fs-xs); font-weight: 600; color: var(--sk-brand); }
.sk-when__month.is-now a { border-color: var(--sk-brand-dark); box-shadow: inset 0 0 0 1px var(--sk-brand-dark); }
.sk-when__month.is-now .sk-when__tag { background: var(--sk-brand-dark); color: #fff; }
.sk-when__footnote { margin-top: 16px; font-size: var(--sk-fs-xs); color: var(--sk-muted); }
@media (max-width: 1023px) { .sk-when { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) {
	.sk-when { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--sk-gutter) * -1); padding: 2px var(--sk-gutter) 6px; scrollbar-width: none; }
	.sk-when::-webkit-scrollbar { display: none; }
	.sk-when__month { scroll-snap-align: start; }
}

/* Destination directory ----------------------------------------------------------- */
.sk-dir__group { border-bottom: 1px solid var(--sk-border); }
.sk-dir__summary { display: flex; align-items: center; gap: 12px; min-height: 60px; cursor: pointer; list-style: none; font-size: 1.125rem; font-weight: 600; color: var(--sk-brand-dark); }
.sk-dir__summary::-webkit-details-marker { display: none; }
.sk-dir__summary:hover { color: var(--sk-brand); }
.sk-dir__count { font-size: var(--sk-fs-xs); font-weight: 500; color: var(--sk-muted); }
.sk-dir__chev { margin-left: auto; transition: transform var(--sk-dur-slow) var(--sk-ease); }
.sk-dir__group[open] .sk-dir__chev { transform: rotate(180deg); }
.sk-dir__links { columns: 2; column-gap: 48px; padding: 0 0 20px; }
.sk-dir__links li { break-inside: avoid; display: flex; align-items: baseline; gap: 8px; padding: 6px 0; }
.sk-dir__links a { color: var(--sk-text); text-decoration: none; font-size: .9375rem; }
.sk-dir__links a:hover { color: var(--sk-brand); text-decoration: underline; }
.sk-dir__n { font-size: var(--sk-fs-xxs); color: var(--sk-muted); }
.sk-dir__more { margin-top: 24px; }
@media (min-width: 1024px) { .sk-dir__links { columns: 3; } }
@media (max-width: 767px) { .sk-dir__links { columns: 1; } .sk-dir__summary { font-size: 1rem; } }

/* 404 ------------------------------------------------------------------------- */
.sk-404 { padding-top: 40px; }
.sk-404__search { margin-top: 28px; }
.sk-404 .sk-search { max-width: none; }