/*
 * basty.ro — mobile & responsive redesign (2026)
 * Kicks in below 960px. Keeps dark-theme identity, modernizes layout.
 */

@media (max-width: 960px) {

	/* ---- Reset / base ---- */
	html, body {
		height: auto;
		min-height: 100%;
		overflow-x: hidden;
	}
	body {
		background: #0a0e1a !important;
		background-image:
			radial-gradient(ellipse at top, rgba(30, 100, 200, 0.18), transparent 60%),
			radial-gradient(ellipse at bottom left, rgba(20, 60, 150, 0.12), transparent 50%),
			url(../img/bg_1.jpg) !important;
		background-size: cover !important;
		background-position: center top !important;
		background-attachment: scroll !important;
		color: #e8ecf5;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
	}
	* {
		font-family: inherit !important;
		font-size: 15px;
		color: #e8ecf5;
		box-sizing: border-box;
	}
	a { color: #5ab8ff; transition: color .2s ease; }
	a:hover, a:focus { color: #8fcfff; text-decoration: none; }

	/* ---- Layout reset ---- */
	div#container {
		width: 100% !important;
		margin: 0;
		padding: 0 0 80px 0; /* bottom padding for sticky nav */
		min-height: auto;
		background: none !important;
	}
	div#content_container,
	div#content_top_bg,
	div#content_bott_bg {
		background: none !important;
		background-image: none !important;
		padding: 0 !important;
		margin: 0 !important;
		min-height: 0 !important;
		height: auto !important;
		margin-right: 0 !important;
	}

	/* ---- Header ---- */
	div#header {
		position: sticky;
		top: 0;
		z-index: 100;
		height: auto !important;
		min-height: 0 !important;
		padding: 14px 16px 12px !important;
		background: linear-gradient(180deg, rgba(10, 14, 26, 0.95) 0%, rgba(10, 14, 26, 0.75) 100%) !important;
		background-image: linear-gradient(180deg, rgba(10, 14, 26, 0.95) 0%, rgba(10, 14, 26, 0.75) 100%) !important;
		backdrop-filter: saturate(1.4) blur(14px);
		-webkit-backdrop-filter: saturate(1.4) blur(14px);
		border-bottom: 1px solid rgba(90, 184, 255, 0.15);
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
	}
	div.logo {
		position: static !important;
		width: auto !important;
		height: auto !important;
		top: auto !important;
		left: auto !important;
		text-align: center;
	}
	div.logo a {
		display: inline-block !important;
		width: auto !important;
		height: auto !important;
	}
	div.logo img {
		max-width: 140px;
		height: auto;
		filter: drop-shadow(0 4px 16px rgba(90, 184, 255, 0.3));
	}

	/* ---- Top menu: hide image-sprite menu (desktop-only) ---- */
	div.top_menu, div.mp3_pl_btn, .footerMenu {
		display: none !important;
	}

	/* Remove bottom padding reserved for tab bar */
	div#container { padding-bottom: 30px !important; }

	/* ---- Content containers ---- */
	div.content_left, div.content_right {
		float: none !important;
		width: auto !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	div.content_left {
		padding: 20px 16px !important;
	}
	div.content_right {
		padding: 8px 16px 24px !important;
	}
	div.content_left > div[style*="width:430px"] {
		display: none !important; /* hidden spacer div */
	}
	div#dynamicContent {
		display: block !important;
	}
	div#dynamicContent p {
		font-size: 16px;
		line-height: 1.6;
		color: #c9d0dc;
		padding-bottom: 14px;
	}

	/* ---- Posts / news rows as cards ---- */
	div[class*="post"], div[class*="stire"], div[id*="post"] {
		background: rgba(255, 255, 255, 0.04);
		border: 1px solid rgba(90, 184, 255, 0.12);
		border-radius: 14px;
		padding: 16px;
		margin-bottom: 16px;
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}
	h1, h2, h3, h4 {
		color: #fff;
		font-weight: 600;
		line-height: 1.3;
		margin: 8px 0 12px;
		letter-spacing: -0.01em;
	}
	h1 { font-size: 26px; }
	h2 { font-size: 20px; }
	h3 { font-size: 17px; }
	h4 { font-size: 15px; }

	/* Red square indicator before post titles */
	img[src*="sgeata"], img[src*="arrow"] {
		display: inline-block;
		vertical-align: middle;
	}

	/* Underlined links for post titles look dated on mobile — clean them up */
	a[href*="detalii_post"], a[href*="download"] {
		text-decoration: none !important;
		color: #5ab8ff !important;
		font-weight: 600;
	}
	a[href*="detalii_post"]:hover {
		color: #8fcfff !important;
	}

	/* "Detalii și comentarii >>" call-to-action */
	*:has(> a[href*="detalii_post"]) {
		text-align: right;
	}

	/* ---- Embedded video/iframe full-width responsive ---- */
	iframe, embed, object, video {
		max-width: 100% !important;
		width: 100% !important;
		height: auto;
		aspect-ratio: 16 / 9;
		border: 0;
		border-radius: 12px;
		overflow: hidden;
	}
	.fb-page iframe, .fb_iframe_widget iframe,
	iframe[src*="facebook"], iframe[src*="likebox"] {
		aspect-ratio: auto !important;
		height: 260px !important;
	}

	/* ---- Right content — stacks below main content ---- */
	div.content_right img {
		max-width: 100%;
		height: auto;
		border-radius: 12px;
	}
	div.content_right h1, div.content_right h2 {
		font-size: 18px;
		margin-top: 20px;
		border-bottom: 1px solid rgba(90, 184, 255, 0.2);
		padding-bottom: 8px;
	}
	div.right_boxesDotted {
		border: none !important;
		padding: 12px 0 !important;
		margin: 0 0 12px 0 !important;
	}

	/* Social icons row — enlarge for touch */
	.socialIcons {
		display: flex !important;
		gap: 14px;
		justify-content: center;
		padding: 12px 0 !important;
	}
	.socialIcons a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		background: rgba(90, 184, 255, 0.1);
		border: 1px solid rgba(90, 184, 255, 0.3);
		border-radius: 12px;
		transition: transform .15s ease, background .2s ease;
	}
	.socialIcons a:active {
		transform: scale(0.92);
		background: rgba(90, 184, 255, 0.25);
	}
	.socialIcons a img {
		width: 26px;
		height: 26px;
		border-radius: 0;
	}

	/* Banner links (Vila Anna, Patrichi) — keep but polish */
	div.content_right a img[src*="banner"],
	div.content_right a img[src*="patrichi"],
	div.content_right a img[src*="Vila"],
	div.content_right a img {
		border-radius: 12px !important;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
		transition: transform .2s ease;
		margin-bottom: 10px;
	}
	div.content_right a:active img { transform: scale(0.98); }

	/* ---- Flash player line (dead tech) — hide ---- */
	#player { display: none !important; }

	/* ---- Forms (contact, search) ---- */
	input[type="text"], input[type="email"], input[type="password"], textarea, select {
		width: 100%;
		padding: 12px 14px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(90, 184, 255, 0.2);
		border-radius: 10px;
		color: #fff;
		font-size: 16px; /* prevents iOS zoom on focus */
		margin-bottom: 12px;
		box-sizing: border-box;
	}
	input[type="text"]:focus, textarea:focus {
		outline: 2px solid rgba(90, 184, 255, 0.6);
		outline-offset: 0;
		border-color: transparent;
	}
	input[type="submit"], button {
		width: 100%;
		padding: 14px 20px;
		background: linear-gradient(135deg, #2b7fd4 0%, #5ab8ff 100%);
		color: #fff !important;
		font-weight: 600;
		font-size: 16px;
		border: 0;
		border-radius: 10px;
		cursor: pointer;
		box-shadow: 0 4px 16px rgba(90, 184, 255, 0.3);
		transition: transform .1s ease, box-shadow .2s ease;
	}
	input[type="submit"]:active {
		transform: scale(0.98);
		box-shadow: 0 2px 8px rgba(90, 184, 255, 0.2);
	}

	/* ---- Images in content ---- */
	div#dynamicContent img {
		max-width: 100%;
		height: auto;
		border-radius: 10px;
	}

	/* ---- Footer ---- */
	div#mainfooter {
		width: auto !important;
		height: auto !important;
		background-image: none !important;
		background: none !important;
		text-align: center;
		color: #6b7280;
		font-size: 12px;
		padding: 22px 20px 18px;
		margin: 18px 16px 0;
		border-top: 1px solid rgba(90, 184, 255, 0.18);
		position: relative;
	}
	div#mainfooter::before {
		content: "";
		position: absolute;
		top: -1px;
		left: 50%;
		transform: translateX(-50%);
		width: 40%;
		height: 1px;
		background: linear-gradient(90deg, transparent 0%, rgba(90, 184, 255, 0.6) 50%, transparent 100%);
	}
	div#mainfooter::after {
		content: "© Basty";
		color: #6b7280;
		font-size: 12px;
	}

	/* ---- Tables (photo galleries etc.) ---- */
	table {
		width: 100% !important;
		display: block;
		overflow-x: auto;
	}

	/* ---- Photo gallery: 3-column grid, full-width thumbs ---- */
	/* Wrapper <div id="fotografii_XX"> toggles display:none/block via JS.
	   Apply grid only when it's actually shown to avoid overriding the hidden state. */
	div[id^="fotografii_"]:not([style*="display:none"]):not([style*="display: none"]) {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
		padding: 8px 0;
	}
	/* Each photo slice — override desktop fixed 100x95px + spritesheet bg */
	div.photo_slice_horiz, div.photo_slice_vert {
		background-image: none !important;
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid rgba(90, 184, 255, 0.12);
		border-radius: 10px;
		width: auto !important;
		height: auto !important;
		float: none !important;
		aspect-ratio: 1 / 1;
		overflow: hidden;
		transition: transform .15s ease, box-shadow .2s ease;
	}
	div.photo_slice_horiz:active, div.photo_slice_vert:active {
		transform: scale(0.96);
		box-shadow: 0 4px 16px rgba(90, 184, 255, 0.3);
	}
	div.photo_slice_horiz a, div.photo_slice_vert a {
		display: block !important;
		width: 100%;
		height: 100%;
		padding: 0 !important;
	}
	div.photo_slice_horiz img, div.photo_slice_vert img {
		display: block;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		border: 0 !important;
	}

	/* ---- Lightbox modal — constrain to mobile viewport ---- */
	#jquery-lightbox {
		padding: 10px !important;
		box-sizing: border-box;
		width: 100vw !important;
		left: 0 !important;
	}
	#lightbox-container-image-box {
		max-width: calc(100vw - 20px) !important;
		max-height: calc(100vh - 80px) !important;
		width: auto !important;
		height: auto !important;
		margin: 0 auto !important;
		background-color: #0a0e1a !important;
		border-radius: 12px;
	}
	#lightbox-container-image {
		padding: 6px !important;
	}
	#lightbox-container-image-box img,
	#lightbox-image {
		max-width: calc(100vw - 32px) !important;
		max-height: calc(100vh - 140px) !important;
		height: auto !important;
		width: auto !important;
		display: block !important;
	}
	#lightbox-container-image-data-box {
		max-width: calc(100vw - 20px) !important;
		width: auto !important;
		margin: 0 auto !important;
		box-sizing: border-box;
		background-color: #0a0e1a !important;
		border-radius: 0 0 12px 12px;
	}
	#lightbox-image-details, #lightbox-image-details-caption, #lightbox-image-details-currentNumber {
		color: #e8ecf5 !important;
	}
	#lightbox-secNav-btnClose {
		filter: invert(1);
	}
	/* Force-visible nav arrows on mobile (original lightbox only shows on hover) */
	#lightbox-nav {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		z-index: 50 !important;
		pointer-events: none;
	}
	#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
		display: block !important;
		position: absolute !important;
		top: 50% !important;
		transform: translateY(-50%);
		width: 44px !important;
		height: 44px !important;
		background-color: rgba(10, 14, 26, 0.7) !important;
		background-image: none !important;
		border: 1px solid rgba(90, 184, 255, 0.4) !important;
		border-radius: 50%;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		pointer-events: auto;
		outline: none !important;
		cursor: pointer;
		float: none !important;
	}
	#lightbox-nav-btnPrev {
		left: 8px !important;
		right: auto !important;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>") !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: 20px !important;
	}
	#lightbox-nav-btnNext {
		right: 8px !important;
		left: auto !important;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: 20px !important;
	}
	#lightbox-nav-btnPrev:active, #lightbox-nav-btnNext:active {
		background-color: rgba(90, 184, 255, 0.4) !important;
		transform: translateY(-50%) scale(0.92);
	}

	/* Smooth scroll */
	html { scroll-behavior: smooth; }

	/* Selection color */
	::selection { background: rgba(90, 184, 255, 0.3); color: #fff; }
}

/* ---- Hamburger menu + drawer ---- */
/* Hamburger hidden on desktop, shown on mobile */
.mobile-hamburger, .mobile-overlay, .mobile-drawer { display: none; }

@media (max-width: 960px) {
	.mobile-hamburger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		position: fixed;
		top: 14px;
		right: 14px;
		z-index: 110;
		width: 44px;
		height: 44px;
		padding: 10px 9px;
		background: rgba(15, 20, 36, 0.85);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1px solid rgba(90, 184, 255, 0.25);
		border-radius: 12px;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.mobile-hamburger span {
		display: block;
		height: 2px;
		background: #e8ecf5;
		border-radius: 2px;
		transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
		transform-origin: center;
	}
	.mobile-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.mobile-hamburger.open span:nth-child(2) { opacity: 0; }
	.mobile-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.mobile-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.55);
		backdrop-filter: blur(2px);
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s ease;
		z-index: 105;
	}
	.mobile-overlay.open {
		opacity: 1;
		pointer-events: auto;
	}

	.mobile-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(320px, 85vw);
		background: linear-gradient(180deg, #0f1324 0%, #0a0e1a 100%);
		border-left: 1px solid rgba(90, 184, 255, 0.2);
		box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
		transform: translateX(100%);
		transition: transform .35s cubic-bezier(.2,.8,.2,1);
		z-index: 107;
		padding: 20px 0 env(safe-area-inset-bottom);
		overflow-y: auto;
	}
	.mobile-drawer.open { transform: translateX(0); }

	.mobile-drawer-header {
		padding: 6px 20px 22px;
		border-bottom: 1px solid rgba(90, 184, 255, 0.12);
		margin-bottom: 12px;
		text-align: center;
	}
	.mobile-drawer-logo {
		width: 120px;
		height: auto;
		filter: drop-shadow(0 4px 16px rgba(90, 184, 255, 0.3));
	}

	.mobile-drawer a {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 15px 22px;
		color: #c9d0dc;
		font-size: 16px;
		font-weight: 500;
		text-decoration: none;
		border-left: 3px solid transparent;
		transition: background .15s ease, color .15s ease, border-color .15s ease;
	}
	.mobile-drawer a:active,
	.mobile-drawer a._active,
	.mobile-drawer a.active {
		background: rgba(90, 184, 255, 0.08);
		color: #5ab8ff;
		border-left-color: #5ab8ff;
	}
	.mobile-drawer a svg {
		width: 22px;
		height: 22px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		flex-shrink: 0;
	}
}