/*
 * Public "Link in Bio" page (AC_CW_Bio_Links::render_page()) — a completely standalone
 * document, no theme header/footer, no other plugin CSS loaded. Self-contained on
 * purpose: this page is the first thing an Instagram/TikTok visitor sees, often inside
 * an in-app browser, so it needs to be fast and not depend on the active theme at all.
 */

/*
 * Same brand font source as assets/css/ac-fonts.css (used by every Elementor widget in
 * this plugin) — this page bypasses wp_enqueue_style() entirely (no theme, no
 * get_header()), so it can't inherit that handle and needs its own @font-face rules
 * instead of just naming 'Montserrat'/'Amiko' and hoping something else provides them.
 */
@font-face {
	font-family: 'Montserrat';
	src: url('https://arge-canna.at/wp-content/uploads/2025/05/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Amiko';
	src: url('https://arge-canna.at/wp-content/uploads/2025/05/Amiko-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

* {
	box-sizing: border-box;
}

html {
	/* Prevents iOS Safari auto-zoom on tap when a form control's font-size is under
	   16px — no form controls here, but harmless/cheap insurance for the future. */
	-webkit-text-size-adjust: 100%;
}

body.ac-bio {
	margin: 0;
	font-family: 'Amiko', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: #F5F7F6;
	background: linear-gradient(160deg, #1e4432 0%, #0e1613 60%, #0a100e 100%);
	background-attachment: fixed;
}

.ac-bio-shell {
	/* The user's explicit requirement: always screen-filling. min-height (not height)
	   so it never clips content when the link list is longer than one screen — the
	   gradient background still always covers at least the full viewport either way.
	   dvh accounts for mobile browser chrome (address bar) resizing the viewport;
	   the plain vh rule right before it is the fallback for browsers that don't know
	   the dvh unit yet (an unsupported unit makes the whole declaration invalid and
	   ignored, so it never overrides the dvh rule in browsers that do support it). */
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: max(32px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.ac-bio-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	margin-bottom: 32px;
	flex-shrink: 0;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.ac-bio-logo:active {
	transform: scale(0.94);
}

.ac-bio-logo img {
	max-width: 68%;
	max-height: 68%;
	object-fit: contain;
	display: block;
}

.ac-bio-logo-text {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #1C2421;
	text-align: center;
	padding: 0 6px;
}

.ac-bio-list {
	width: 100%;
	max-width: 480px;
	/* Grid, not flex: "link"/"card" items span both columns (full width), "tile" items
	   span a single column — grid auto-placement naturally pairs two consecutive tiles
	   side by side without any manual row/column bookkeeping. */
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.ac-bio-item {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	text-decoration: none;
	color: #1C2421;
	background: rgba(255, 255, 255, 0.96);
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;

	/* Staggered entrance — see ac-bio-links.js, which adds .is-visible per item with a
	   30–50ms delay driven by the --ac-bio-i custom property set inline per item. */
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.2s ease;
}

.ac-bio-item.is-visible {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(var(--ac-bio-i, 0) * 45ms);
}

.ac-bio-item:hover {
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.ac-bio-item:active {
	transform: scale(0.97);
}

/* Plain link row — full width, min 56px tall, comfortably exceeds the 44px touch-target
   minimum. Also the fallback shape for "card"/"tile" items missing an image. */
.ac-bio-item--link {
	grid-column: 1 / -1;
	min-height: 56px;
	padding: 14px 20px;
	justify-content: center;
	text-align: center;
}

.ac-bio-item--link .ac-bio-item-label {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.01em;
}

/* Image-preview card — full width, image on top, label as caption below */
.ac-bio-item--card {
	grid-column: 1 / -1;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	overflow: hidden;
}

/* Tile — half width, two sit side by side (grid auto-placement). Same image-on-top +
   caption structure as a card, just squarer and more compact for a denser grid of
   smaller links (e.g. individual product/press-item thumbnails). */
.ac-bio-item--tile {
	grid-column: span 1;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.ac-bio-item--tile .ac-bio-item-media {
	aspect-ratio: 1 / 1;
}

.ac-bio-item-media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #E0E4E2;
}

.ac-bio-item-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Shared label styling for both formats; padding/font-size are format-specific below
   (tile is a slightly denser, squarer layout) so each is declared exactly once — no two
   rules of equal specificity fighting over the same property. */
.ac-bio-item--card .ac-bio-item-label,
.ac-bio-item--tile .ac-bio-item-label {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
}

.ac-bio-item--card .ac-bio-item-label {
	padding: 14px 18px;
	font-size: 15px;
}

.ac-bio-item--tile .ac-bio-item-label {
	padding: 10px 12px;
	font-size: 13px;
}

/* "Aktuelle News" section (AC_CW_Bio_Links::get_news_items()) */
.ac-bio-news {
	width: 100%;
	max-width: 480px;
	margin-top: 36px;
}

.ac-bio-news-heading {
	margin: 0 0 14px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(245, 247, 246, 0.7);
	text-align: center;
}

.ac-bio-pin-badge {
	display: inline-block;
	margin-right: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #2E6741;
	color: #FFFFFF;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	vertical-align: middle;
}

/* Footer: social icon row + Impressum. margin-top:auto pushes it to the bottom of the
   viewport when the page content is shorter than one screen (flex column shell), while
   still flowing naturally after content on longer pages. */
.ac-bio-footer {
	width: 100%;
	max-width: 480px;
	margin-top: auto;
	padding-top: 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.ac-bio-socials {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.ac-bio-social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #F5F7F6;
	font-size: 19px;
	text-decoration: none;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.ac-bio-social:hover {
	background: rgba(255, 255, 255, 0.22);
}

.ac-bio-social:active {
	transform: scale(0.92);
}

.ac-bio-imprint {
	font-family: 'Amiko', sans-serif;
	font-size: 12.5px;
	color: rgba(245, 247, 246, 0.55);
	text-decoration: none;
}

.ac-bio-imprint:hover {
	color: rgba(245, 247, 246, 0.85);
	text-decoration: underline;
}

@media (min-width: 560px) {
	.ac-bio-logo {
		width: 96px;
		height: 96px;
		margin-bottom: 40px;
	}

	.ac-bio-item--link .ac-bio-item-label {
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ac-bio-item {
		transition: none !important;
		opacity: 1;
		transform: none;
	}

	.ac-bio-logo,
	.ac-bio-item,
	.ac-bio-social {
		transition: none !important;
	}
}