/**
 * Gemora – Style komponentów globalnych
 * assets/css/components.css
 * Ładowany na WSZYSTKICH stronach przez wp_enqueue_style() w inc/shortcodes-components.php
 */

/* ============================================================
   1. Topbar
   ============================================================ */

#gmb-d {
	background: #4a122b; padding: 9px 16px;
	display: flex; align-items: center; justify-content: center;
	gap: 20px; flex-wrap: wrap; width: 100%; box-sizing: border-box;
}
#gmb-m {
	display: none; background: #4a122b; overflow: hidden;
	width: 100%; box-sizing: border-box; height: 37px;
}
@media (max-width: 1024px) {
	#gmb-d { display: none !important; }
	#gmb-m { display: block !important; }
}
.gmb-i { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 12px; white-space: nowrap; }
.gmb-sep { color: rgba(255,255,255,.25); font-size: 15px; }
.gmb-reel { display: flex; width: 500%; height: 30px; animation: gmb-roll 15s steps(1) infinite; }
.gmb-s {
	width: 20%; display: flex; align-items: center; justify-content: center;
	gap: 7px; color: #fff; font-size: 12px; letter-spacing: .04em;
	white-space: nowrap; height: 30px; padding: 0 1rem; box-sizing: border-box;
}
@keyframes gmb-roll {
	0%   { transform: translateX(0); }
	20%  { transform: translateX(-20%); }
	40%  { transform: translateX(-40%); }
	60%  { transform: translateX(-60%); }
	80%  { transform: translateX(-80%); }
	100% { transform: translateX(0); }
}
.gmb-dots-wrap { display: flex; justify-content: center; gap: 5px; align-items: center; margin-top: -4px; }
.gmb-dot-css {
	width: 4px; height: 4px; border-radius: 50%;
	background: rgba(255,255,255,0.3);
	animation: gmb-dot-anim 15s steps(1) infinite;
}
.gmb-dot-css:nth-child(1) { animation-delay: 0s; }
.gmb-dot-css:nth-child(2) { animation-delay: -12s; }
.gmb-dot-css:nth-child(3) { animation-delay: -9s; }
.gmb-dot-css:nth-child(4) { animation-delay: -6s; }
.gmb-dot-css:nth-child(5) { animation-delay: -3s; }
@keyframes gmb-dot-anim {
	0%, 19%   { background: rgba(255,255,255,0.9); width: 12px; border-radius: 2px; }
	20%, 100% { background: rgba(255,255,255,0.3); width: 4px; border-radius: 50%; }
}

/* ============================================================
   2. Trust bar
   ============================================================ */

.gtb { background: #9C1146; width: 100%; font-family: inherit; }
.gtb-in { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; max-width: 1280px; margin: 0 auto; }
.gtb-item { display: flex; align-items: center; gap: 12px; padding: 15px 24px; flex: 1; min-width: 190px; position: relative; transition: background 0.2s; cursor: pointer; text-decoration: none; }
.gtb-item:hover { background: rgba(255,255,255,0.07); }
.gtb-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 22%; bottom: 22%; width: 1px; background: rgba(255,255,255,0.14); }
.gtb-ic { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
.gtb-item:hover .gtb-ic { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.32); }
.gtb-ic svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gtb-label { font-size: 13px; font-weight: 500; color: #fff; letter-spacing: 0.02em; line-height: 1.2; }
.gtb-sub { font-size: 11px; color: rgba(255,255,255,0.48); margin-top: 2px; letter-spacing: 0.02em; }
@media (max-width: 768px) { .gtb { display: none !important; } }

/* ============================================================
   3. Hero
   ============================================================ */

.gh { background: linear-gradient(135deg,#4a122b 0%,#6d1239 40%,#9c1146 100%); padding: 3.5rem 2rem; position: relative; overflow: hidden; width: 100%; box-sizing: border-box; font-family: inherit; }
.gh::before { content: ''; position: absolute; top: -80px; right: -80px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,0.04) 0%,transparent 70%); pointer-events: none; }
.gh-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
.gh .gh-title { font-size: clamp(16px,1.6vw,24px) !important; font-weight: 500 !important; font-family: 'Playfair Display',serif !important; color: #fff !important; line-height: 1.25 !important; margin: 0 0 1.25rem 0 !important; text-transform: none !important; letter-spacing: normal !important; padding: 0 !important; }
.gh .gh-title em { font-style: italic; color: rgba(255,220,235,0.95); }
.gh .gh-sub { font-size: 13px !important; color: rgba(255,255,255,0.62) !important; line-height: 1.7 !important; margin: 0 0 1.75rem 0 !important; max-width: 580px; font-weight: 300 !important; text-transform: none !important; letter-spacing: normal !important; padding: 0 !important; }
.gh .gh-sub a { color: rgba(255,255,255,0.62) !important; text-decoration: none !important; font-weight: 300 !important; }
.gh-btns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 1.75rem; }
.gh-btn-main { background: #fff; color: #9c1146; border: 2px solid #fff; padding: 11px 24px; font-family: inherit; font-size: 12px; letter-spacing: 0.08em; font-weight: 500; cursor: pointer; border-radius: 8px; transition: all 0.2s; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; text-decoration: none !important; }
.gh-btn-main:hover { background: #fdf0f5; color: #9c1146; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.gh-btn-sec { background: transparent; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.25); padding: 11px 22px; font-family: inherit; font-size: 12px; letter-spacing: 0.08em; cursor: pointer; border-radius: 8px; transition: all 0.2s; text-transform: uppercase; text-decoration: none !important; display: inline-flex; align-items: center; }
.gh-btn-sec:hover { background: rgba(255,255,255,0.1); color: #fff; }
.gh-stats { display: flex; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.15); }
.gh-stat { flex: 1; text-align: center; padding: 0 0.75rem; position: relative; }
.gh-stat:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 5%; bottom: 5%; width: 1px; background: rgba(255,255,255,0.2); }
.gh-stat-inner { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 52px; gap: 3px; }
.gh-stat-num { font-size: 22px !important; font-weight: 500 !important; color: #fff !important; line-height: 1 !important; font-family: inherit !important; text-transform: none !important; letter-spacing: normal !important; margin: 0 !important; }
.gh-stat-label { font-size: 9.5px !important; color: rgba(255,255,255,0.45) !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin: 0 !important; line-height: 1.2 !important; }
.gh-stars { display: flex; gap: 2px; justify-content: center; }
.gh-star { color: #f5c842; font-size: 12px; line-height: 1; }
@media (max-width: 900px) { .gh .gh-title { font-size: clamp(17px,2.2vw,22px) !important; } }
@media (max-width: 600px) {
	.gh { padding: 2.5rem 1.25rem; }
	.gh .gh-title { font-size: 16px !important; }
	.gh-stat { padding: 0 0.4rem; }
	.gh-stat-num { font-size: 17px !important; }
	.gh-stat-inner { height: 48px; }
	.gh-btn-main, .gh-btn-sec { padding: 10px 16px; font-size: 11px; }
}

/* ============================================================
   4. Marquee
   ============================================================ */

.gm-wrap { background: #fff; border-bottom: 1px solid rgba(139,26,74,0.12); overflow: hidden; width: 100%; padding: 10px 0; box-sizing: border-box; }
.gm-track { display: flex; width: max-content; animation: gm-scroll 88s linear infinite; }
.gm-track:hover { animation-play-state: paused; }
.gm-item { display: inline-flex; align-items: center; gap: 12px; padding: 0 2.5rem; font-size: 13px; color: #4a122b; letter-spacing: 0.04em; white-space: nowrap; font-family: inherit; font-weight: 300; }
.gm-sep { display: inline-flex; align-items: center; padding: 0 1rem; opacity: 0.4; }
.gm-sep svg { width: 10px; height: 10px; fill: none; stroke: #9C1146; stroke-width: 1.5; }
@keyframes gm-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ============================================================
   5. Płatności
   ============================================================ */

.gp-wrap { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; justify-content: flex-end; }
.gp-tag { background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 5px; padding: 4px 10px; font-size: 10px; font-weight: 500; color: #555; letter-spacing: 0.03em; white-space: nowrap; }
@media (max-width: 767px) { .gp-wrap { display: none; } }

/* ============================================================
   6. Karuzela kategorii (.gk-*) — gemora_karuzela
   ============================================================ */

.gk-outer { position: relative; padding: 0 24px; }
.gk-wrap { overflow: hidden; width: 100%; }
.gk-track { display: flex; gap: 14px; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); will-change: transform; padding: 4px 2px 8px; }
.gk-card { flex-shrink: 0; border-radius: 14px; overflow: hidden; position: relative; cursor: pointer; text-decoration: none; display: block; aspect-ratio: 1/1; width: calc((100% - 56px) / 4); }
.gk-card:hover .gk-bg { transform: scale(1.04); }
.gk-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.4s ease; }
.gk-ov { display: none; }
.gk-badge { position: absolute; top: 4px; left: 4px; background: rgba(255,255,255,0.92); color: #9C1146; font-family: 'Playfair Display',serif; font-style: italic; font-size: 12px; padding: 4px 12px; border-radius: 20px; line-height: 1.3; }
.gk-cta { position: absolute; bottom: 8px; right: 12px; display: flex; align-items: center; gap: 5px; }
.gk-cta-arr { font-size: 12px; color: #232323; font-weight: 600; text-shadow: 0 1px 3px rgba(255,255,255,0.9); }
.gk-card:hover .gk-cta-arr { color: #000; }
.gk-cta-lbl { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #232323; font-family: inherit; font-weight: 600; text-shadow: 0 1px 3px rgba(255,255,255,0.9); }
.gk-btn { position: absolute; top: 50%; transform: translateY(-60%); width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid rgba(156,17,70,0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; box-shadow: 0 2px 12px rgba(0,0,0,0.1); transition: all 0.2s; color: #9C1146; padding: 0; }
.gk-btn:hover { background: #9C1146; color: #fff; }
.gk-prev { left: 0; }
.gk-next { right: 0; }
.gk-dots { display: flex; justify-content: center; gap: 6px; margin-top: 0.75rem; margin-bottom: 1.5rem; }
.gk-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(156,17,70,0.2); cursor: pointer; transition: all 0.25s; border: none; padding: 0; }
.gk-dot.on { background: #9C1146; width: 20px; border-radius: 4px; }
@media (max-width: 768px) {
	.gk-outer { padding: 0 14px; }
	.gk-track { flex-wrap: wrap; gap: 10px; transition: none; }
	.gk-track.sliding { flex-wrap: nowrap; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
	.gk-card { width: calc((100% - 10px) / 2); }
}

/* ============================================================
   7. Siatka kart (.gk2-*) — gemora_karuzela2 i gemora_karuzela3
   ============================================================ */

.gk2-outer { position: relative; padding: 0 24px; }
.gk2-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%; }
.gk2-card {
	border-radius: 10px; overflow: hidden; position: relative; cursor: pointer;
	text-decoration: none; display: block; aspect-ratio: 1/1;
	background: #fff; isolation: isolate; transform: translateZ(0);
	border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 3px 8px rgba(0,0,0,0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.gk2-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.gk2-card:hover { transform: translateY(-1px); border-color: rgba(0,0,0,0.10); box-shadow: 0 4px 16px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04); }
.gk2-card:hover .gk2-bg { transform: scale(1.04); }
.gk2-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.4s ease; }
.gk2-ov { display: none; }
.gk2-badge { position: absolute; top: 4px; left: 4px; background: rgba(255,255,255,0.92); color: #9C1146; font-family: 'Playfair Display',serif; font-style: italic; font-size: 12px; padding: 4px 12px; border-radius: 20px; line-height: 1.3; z-index: 2; }
.gk2-cta { position: absolute; bottom: 8px; right: 12px; display: flex; align-items: center; gap: 5px; z-index: 2; }
.gk2-cta-arr { font-size: 12px; color: #232323; font-weight: 600; text-shadow: 0 1px 3px rgba(255,255,255,0.9); transition: color 0.2s ease; line-height: 1; }
.gk2-card:hover .gk2-cta-arr { color: #000; }
.gk2-cta-lbl { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #232323; font-family: inherit; font-weight: 600; text-shadow: 0 1px 3px rgba(255,255,255,0.9); line-height: 1; }
@media (max-width: 768px) {
	.gk2-outer { padding: 0 14px; }
	.gk2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}