/* ============================================================
   BWIS SIGHTINGS — HONEYCOMB ARCHIVE
   Appended to child theme styles via wp_enqueue_style
   ============================================================ */

/* ── Archive header ── */
.bwis-archive-main {
	padding-block: clamp(2rem, 5vw, 4rem);
	padding-inline: clamp(1rem, 4vw, 2rem);
	max-width: 1200px;
	margin-inline: auto;
}

.bwis-archive-header {
	text-align: center;
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.bwis-archive-header__inner {
	display: inline-block;
	position: relative;
}

.bwis-archive-header__eyebrow {
	display: block;
	font-family: var(--bwis-font-label);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--bwis-amber);
	margin-bottom: 0.5rem;
}

.bwis-archive-header__title {
	font-family: var(--bwis-font-display);
	font-size: clamp(2.5rem, 7vw, 5rem);
	font-weight: 900;
	color: var(--bwis-gold);
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0 0 1rem;
	text-shadow: 0 4px 32px rgba(245, 197, 24, 0.2);
}

.bwis-archive-header__desc {
	color: var(--bwis-cream);
	font-size: 1rem;
	max-width: 480px;
	margin: 0 auto 0.75rem;
	opacity: 0.8;
}

.bwis-archive-header__count {
	font-family: var(--bwis-font-label);
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bwis-muted);
}

.bwis-archive-header__count strong {
	color: var(--bwis-gold);
}

/* ── Honeycomb grid ── */

/*
  Hex maths:
    width  = W
    height = W × 1.1547  (2/√3)
    row offset = W × 0.5  (every other column shifts down half a hex)

  We use CSS Grid + a negative margin trick to interlock the rows.
  Each hex card has an aspect-ratio that matches a flat-top hexagon.
*/

.bwis-honeycomb {
	--hex-w: clamp(160px, 22vw, 260px);
	--hex-h: calc(var(--hex-w) * 1.1547);
	--hex-gap: calc(var(--hex-w) * 0.04);
	--row-shift: calc(var(--hex-w) * 0.5 + var(--hex-gap) * 0.5);

	display: grid;
	grid-template-columns: repeat(auto-fill, var(--hex-w));
	gap: var(--hex-gap) var(--hex-gap);
	justify-content: center;

	/* Pull alternate items up to create interlocking rows */
	padding-bottom: calc(var(--hex-h) * 0.25);
}

/* Every even card shifts down to create the honeycomb offset */
.bwis-hex-card:nth-child(even) {
	margin-top: calc(var(--hex-h) * 0.28);
}

/* ── Individual hex card ── */
.bwis-hex-card {
	width: var(--hex-w);
	height: var(--hex-h);
	position: relative;
}

.bwis-hex-card--spacer {
	pointer-events: none;
	opacity: 0;
}

.bwis-hex-card__link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

/* The hexagon shape */
.bwis-hex-card__shape {
	width: 100%;
	height: 100%;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease, filter 0.3s ease;
}

.bwis-hex-card__link:hover .bwis-hex-card__shape,
.bwis-hex-card__link:focus-visible .bwis-hex-card__shape {
	transform: scale(1.06);
	filter: brightness(1.1);
}

/* Gold hex border — achieved with a pseudo element slightly larger */
.bwis-hex-card__shape::before {
	content: '';
	position: absolute;
	inset: -3px;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: var(--bwis-gold);
	z-index: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.bwis-hex-card__link:hover .bwis-hex-card__shape::before,
.bwis-hex-card__link:focus-visible .bwis-hex-card__shape::before {
	opacity: 1;
}

/* Background photo */
.bwis-hex-card__image {
	position: absolute;
	inset: 0;
	background-image: var(--thumb);
	background-size: cover;
	background-position: center;
	z-index: 1;
	transition: transform 0.4s ease;
}

.bwis-hex-card__link:hover .bwis-hex-card__image {
	transform: scale(1.08);
}

/* Dark gradient overlay — hidden until hover */
.bwis-hex-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		160deg,
		rgba(10, 10, 8, 0)    20%,
		rgba(10, 10, 8, 0.55) 60%,
		rgba(10, 10, 8, 0.88) 100%
	);
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 18% 12% 14%;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.bwis-hex-card__link:hover .bwis-hex-card__overlay,
.bwis-hex-card__link:focus-visible .bwis-hex-card__overlay {
	opacity: 1;
}

/* Text content inside hex */
.bwis-hex-card__content {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}

.bwis-hex-card__title {
	font-family: var(--bwis-font-display);
	font-size: clamp(0.7rem, 1.5vw, 1rem);
	font-weight: 700;
	color: var(--bwis-gold-light);
	line-height: 1.2;
	margin: 0;
}

.bwis-hex-card__species {
	display: block;
	font-family: var(--bwis-font-body);
	font-style: italic;
	font-size: clamp(0.6rem, 1.2vw, 0.8rem);
	color: var(--bwis-cream);
	opacity: 0.9;
}

.bwis-hex-card__location,
.bwis-hex-card__date {
	display: block;
	font-family: var(--bwis-font-label);
	font-size: clamp(0.55rem, 1vw, 0.7rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bwis-amber);
}

/* ── Pagination ── */
.bwis-pagination {
	margin-top: clamp(3rem, 6vw, 5rem);
	display: flex;
	justify-content: center;
}

.bwis-pagination .nav-links {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
}

/* ── No results ── */
.bwis-no-results {
	text-align: center;
	padding: 5rem 1rem;
	color: var(--bwis-muted);
}

.bwis-no-results__hex {
	display: block;
	font-size: 4rem;
	color: var(--bwis-mid);
	margin-bottom: 1rem;
	animation: bwis-pulse 2.5s ease-in-out infinite;
}

@keyframes bwis-pulse {
	0%, 100% { opacity: 0.3; transform: scale(1); }
	50%       { opacity: 0.8; transform: scale(1.08); }
}

/* ── Responsive ── */
@media (max-width: 600px) {
	.bwis-honeycomb {
		--hex-w: clamp(120px, 42vw, 180px);
	}

	/* On very small screens, drop the offset to a simple grid */
	.bwis-hex-card:nth-child(even) {
		margin-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bwis-hex-card__shape,
	.bwis-hex-card__image,
	.bwis-hex-card__overlay {
		transition: none;
	}
	.bwis-no-results__hex {
		animation: none;
		opacity: 0.5;
	}
}