/* =====================================================================
   GL Wiki — ficha pages: layout, text blocks, side decorations
   ===================================================================== */

/* ---------- Page layout: [left decor] [content] [right decor] ---------- */

.gw-wrap { width: 100%; }

.gw-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "center";
}
.gw-center { grid-area: center; min-width: 0; }

.gw-side { display: none; }

/* Tablet / small laptop: decorations sit under the text, side by side. */
@media (min-width: 700px) {
	.gw-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "center center" "left right";
		gap: 0 12px;
		padding: 0 12px 16px;
	}
	.gw-side {
		display: block;
		position: relative;
		overflow: hidden;
		container-type: inline-size;
	}
	.gw-side-left { grid-area: left; }
	.gw-side-right { grid-area: right; }
}

/* Wide screens: decorations live in the margins on both sides of the text. */
@media (min-width: 1440px) {
	.gw-grid {
		--side-w: clamp(170px, calc((100vw - 1040px) / 2 - 20px), 340px);
		grid-template-columns: var(--side-w) minmax(0, 1040px) var(--side-w);
		grid-template-areas: "left center right";
		justify-content: center;
		column-gap: 12px;
		padding: 0;
	}
}

/* Browsers without container query units simply don't show the decorations. */
@supports not (width: 1cqw) {
	.gw-side { display: none !important; }
}

/* The spacer reserves exactly the height the decorations need. */
.gw-spacer { width: 100%; padding-top: calc(var(--h, 0) / 300 * 100%); }

/* ---------- Decorations (positions are in a 300-unit-wide space) ---------- */

.gw-el {
	position: absolute;
	left: calc(var(--x) / 3 * 1cqw);
	top: calc(var(--y) / 3 * 1cqw);
	width: calc(var(--ew) / 3 * 1cqw);
	transform: rotate(calc(var(--r) * 1deg));
	z-index: var(--z);
}
.gw-img, .gw-st { height: calc(var(--eh) / 3 * 1cqw); }
.gw-el img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}
.gw-img {
	background: #fff;
	padding: calc(4 / 3 * 1cqw);
	border-radius: calc(8 / 3 * 1cqw);
	box-sizing: border-box;
	box-shadow: 0 calc(4 / 3 * 1cqw) calc(12 / 3 * 1cqw) rgba(131, 24, 67, .28);
}
.gw-img img { object-fit: cover; border-radius: calc(5 / 3 * 1cqw); }
.gw-st img { filter: drop-shadow(0 calc(2 / 3 * 1cqw) calc(3 / 3 * 1cqw) rgba(131, 24, 67, .25)); }

.gw-note {
	font-size: calc(var(--fs) / 3 * 1cqw);
	line-height: 1.3;
	padding: calc(9 / 3 * 1cqw) calc(11 / 3 * 1cqw);
	border-radius: calc(10 / 3 * 1cqw);
	box-sizing: border-box;
	word-break: break-word;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
}
.gw-note-plain { padding: 0; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.gw-note-sticky { background: linear-gradient(180deg, #fff9c4, #ffe680); box-shadow: 0 calc(4 / 3 * 1cqw) calc(10 / 3 * 1cqw) rgba(0, 0, 0, .2); }
.gw-note-bubble { background: linear-gradient(180deg, #ffffff, #fbe8fb 55%, #eec3ef); border: 1px solid #e3aee8; border-radius: calc(20 / 3 * 1cqw); box-shadow: 0 calc(3 / 3 * 1cqw) calc(8 / 3 * 1cqw) rgba(131, 24, 67, .2), inset 0 1px 0 rgba(255, 255, 255, .9); }
.gw-note-glass { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 calc(3 / 3 * 1cqw) calc(10 / 3 * 1cqw) rgba(131, 24, 67, .15); }
.gw-note-chrome { background: linear-gradient(180deg, #ffffff, #e9d5ff 55%, #d79be3); border: 1px solid #c084fc; box-shadow: 0 calc(3 / 3 * 1cqw) calc(8 / 3 * 1cqw) rgba(91, 33, 182, .25), inset 0 1px 0 rgba(255, 255, 255, .9); }

/* ---------- Fonts & sizes available in text and notes ---------- */

.gwf-default { font-family: 'Inter', sans-serif; }
.gwf-baloo { font-family: 'Baloo 2', 'Inter', cursive; }
.gwf-playfair { font-family: 'Playfair Display', Georgia, serif; }
.gwf-caveat { font-family: 'Caveat', cursive; }
.gwf-mono { font-family: 'Space Mono', ui-monospace, monospace; }

.gws-sm { font-size: .85rem; }
.gws-md { font-size: 1rem; }
.gws-lg { font-size: 1.3rem; }
.gws-xl { font-size: 1.7rem; }
.gws-xxl { font-size: 2.2rem; }

/* ---------- Text blocks ---------- */

.gw-content { font-size: 1rem; line-height: 1.7; color: #3b2a40; }
.gw-content::after { content: ""; display: block; clear: both; }
.gw-content > :first-child { margin-top: 0; }
.gw-content p, .gw-content .gw-p { margin: 0 0 1em; }
.gw-content a { color: #c0348a; text-decoration: underline; }
.gw-content ul, .gw-content ol { margin: 0 0 1em 1.4em; }
.gw-content ul { list-style: disc; }
.gw-content ol { list-style: decimal; }
.gw-content li { margin: .2em 0; }

.gw-h {
	clear: both;
	font-family: 'Baloo 2', 'Inter', cursive;
	font-weight: 800;
	line-height: 1.2;
	margin: 1.4em 0 .5em;
	color: #a21caf;
}
h2.gw-h {
	font-size: 1.6rem;
	padding-bottom: .2em;
	border-bottom: 3px solid transparent;
	border-image: linear-gradient(90deg, #f9a8d4, #c084fc, transparent) 1;
	text-shadow: 0 1px 0 #fff, 0 2px 0 rgba(236, 72, 153, .18);
}
h3.gw-h { font-size: 1.25rem; color: #be185d; }

/* Images */
.gw-fig { margin: 1.2em 0; }
.gw-fig img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 14px;
	border: 3px solid #fff;
	box-shadow: 0 8px 22px rgba(131, 24, 67, .22), 0 0 0 1px #ecd4f3;
}
.gw-fig figcaption { font-size: .85rem; color: #7a5a85; font-style: italic; margin-top: .5em; text-align: center; }
.gw-fig-center { max-width: 75%; margin-left: auto; margin-right: auto; }
.gw-fig-center img { margin: 0 auto; }
.gw-fig-full { width: 100%; clear: both; }
.gw-fig-full img { width: 100%; }
.gw-fig-left { float: left; width: 42%; margin: .3em 1.4em 1em 0; }
.gw-fig-right { float: right; width: 42%; margin: .3em 0 1em 1.4em; }

/* Pull quote */
.gw-quote {
	position: relative;
	clear: both;
	margin: 1.6em 0;
	padding: 1.1em 1.5em 1.1em 3.3em;
	border-radius: 20px;
	background: linear-gradient(135deg, #fdeafc, #efe2fb);
	border: 2px solid #e3aee8;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 16px rgba(131, 24, 67, .12);
	font-family: 'Baloo 2', 'Inter', cursive;
	font-size: 1.25rem;
	font-style: italic;
	color: #831843;
}
.gw-quote::before { content: "\201C"; position: absolute; left: .35em; top: -.05em; font-size: 4rem; line-height: 1; color: #ec4899; font-family: Georgia, serif; }
.gw-quote p { margin: 0; }
.gw-quote cite { display: block; margin-top: .5em; font-size: .9rem; font-style: normal; font-weight: 700; color: #a21caf; }
.gw-quote cite::before { content: "\2014  "; }

/* Key fact box */
.gw-fact {
	clear: both;
	margin: 1.4em 0;
	padding: 1em 1.2em;
	border-radius: 18px;
	background: #fff;
	border: 2px solid #f9a8d4;
	box-shadow: 0 0 0 4px #fdf2fb, 0 8px 18px rgba(131, 24, 67, .12);
}
.gw-fact-title {
	display: inline-block;
	margin-bottom: .5em;
	padding: .15em .85em;
	border-radius: 9999px;
	background: linear-gradient(180deg, #f9a8d4, #be185d);
	color: #fff;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}
.gw-fact-body > :last-child { margin-bottom: 0; }

/* Gallery */
.gw-gallery { display: grid; gap: 10px; margin: 1.2em 0; clear: both; }
.gw-cols-2 { grid-template-columns: repeat(2, 1fr); }
.gw-cols-3 { grid-template-columns: repeat(3, 1fr); }
.gw-cols-4 { grid-template-columns: repeat(4, 1fr); }
.gw-gi { margin: 0; }
.gw-gi img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 3px solid #fff; box-shadow: 0 5px 14px rgba(131, 24, 67, .2); }
.gw-gi figcaption { font-size: .78rem; color: #7a5a85; font-style: italic; text-align: center; margin-top: .3em; }

/* Table */
.gw-table-wrap { clear: both; overflow-x: auto; margin: 1.2em 0; border-radius: 16px; border: 2px solid #e3aee8; box-shadow: 0 5px 14px rgba(131, 24, 67, .12); }
.gw-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.gw-table th { background: linear-gradient(180deg, #f9a8d4, #d946a8); color: #fff; text-align: left; padding: .6em .8em; text-shadow: 0 1px 1px rgba(0, 0, 0, .2); }
.gw-table td { padding: .55em .8em; border-top: 1px solid #f3d9f7; background: #fff; }
.gw-table tr:nth-child(even) td { background: #fdf4ff; }

/* YouTube */
.gw-yt { position: relative; clear: both; aspect-ratio: 16 / 9; margin: 1.2em 0; border-radius: 16px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 8px 22px rgba(131, 24, 67, .22); background: #000; }
.gw-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gw-cap { font-size: .85rem; text-align: center; color: #7a5a85; font-style: italic; margin: -.6em 0 1em; }

@media (max-width: 640px) {
	.gw-fig-left, .gw-fig-right { float: none; width: 100%; margin: 1em 0; }
	.gw-fig-center { max-width: 100%; }
	.gw-cols-3, .gw-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Floating "Edit this page" buttons ---------- */

.gwe-fab-group {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}
.gwe-fab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 20px;
	border-radius: 9999px;
	border: 1px solid #be185d;
	background: linear-gradient(180deg, #f9a8d4 0%, #ec4899 55%, #be185d 100%);
	color: #fff;
	font: 700 14px 'Inter', sans-serif;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	box-shadow: 0 6px 18px rgba(131, 24, 67, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
	cursor: pointer;
}
.gwe-fab:hover { filter: brightness(1.05); }
.gwe-fab-small { padding: 8px 14px; font-size: 12px; background: linear-gradient(180deg, #fff, #fbe8fb 55%, #eec3ef); color: #831843; border-color: #e3aee8; text-shadow: none; }
.gwe-fab-locked { background: linear-gradient(180deg, #e5e7eb, #9ca3af); border-color: #6b7280; cursor: default; }