/*
 * Mobile / tablet responsive overrides for the new design.
 *
 * Three breakpoints:
 *   1100 px — most 3/4-column grids collapse to 2-col or 1-col
 *   720  px — single-column for everything, tightened section padding
 *   540  px — fine-mobile fixes (typography, padding, edge-cases)
 *
 * Per-component responsive logic that's tightly coupled to that
 * component's structure stays in the component's own CSS file
 * (e.g. design-benefits.css, design-hall-modal.css). This file holds
 * cross-cutting layout / typography / page-template adjustments.
 *
 * Header / nav / topbar / menu-toggle responsive rules belong to the
 * legacy Morrison-clone header which has its own media queries.
 */

/* =================================================================
 * Tablet / small-desktop (≤ 1100 px)
 * ================================================================= */

@media (max-width: 1100px) {
	/* Hero — single-column on tablet, image stacks below text. */
	.teledom-design .hero .container {
		grid-template-columns: 1fr;
		padding-top: 30px;
	}
	.teledom-design .hero .right {
		height: 60vh;
		min-height: 400px;
	}
	.teledom-design .hero.hero--with-stats .container {
		padding-top: 30px;
	}
	.teledom-design .hero-grid {
		grid-template-columns: 1fr;
		gap: 30px;
		min-height: auto;
	}
	.teledom-design .hero-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 0;
		padding: 28px 24px 0;
	}
	.teledom-design .hero-stats .item {
		padding: 6px 16px 6px 0;
	}
	.teledom-design .hero-stats .item + .item {
		padding-left: 0;
		border-left: 0;
	}
	.teledom-design .hero-stats .item:nth-child(even) {
		padding-left: 20px;
		border-left: 1px solid rgba(255, 255, 255, 0.08);
	}

	/* Booking-hero (event landings) — meta-card stacks under copy. */
	.teledom-design .booking-hero {
		padding: 100px 0 60px;
	}
	.teledom-design .booking-hero .container {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.teledom-design .booking-hero .meta-card {
		padding: 24px;
	}

	/* Room cards — image and text stack vertically. */
	.teledom-design .room,
	.teledom-design .room.flip {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.teledom-design .room.flip .imgs {
		order: 0;
	}
	.teledom-design .room .imgs {
		height: 380px;
	}

	/* Page banner — smaller heading, less padding. */
	.teledom-design .page-banner {
		padding: 80px 0 60px;
	}
	.teledom-design .page-banner h1 {
		font-size: clamp(36px, 7vw, 60px);
	}

	/* About split — image and text stack. */
	.teledom-design .about .grid {
		grid-template-columns: 1fr;
		gap: 60px;
	}
	.teledom-design .about .visual .corner {
		position: relative;
		bottom: 0;
		right: 0;
		width: 100%;
		margin-top: 14px;
	}
	.teledom-design .about .visual .stamp {
		display: none;
	}

	/* Section head — heading and description stack vertically.
	 *
	 * The desktop rule has `align-items: center` so the right-block lines
	 * up vertically centred next to the heading; on mobile that creates
	 * an awkward gap because the right-block is shorter than the
	 * heading. Override to `start` so the lead text starts immediately
	 * underneath the heading with no dead space. Also explicitly reset
	 * `right-block { align-self }` for the same reason. */
	.teledom-design .section-head {
		grid-template-columns: 1fr;
		gap: 18px;
		align-items: start;
		margin-bottom: 40px;
	}
	.teledom-design .section-head > div {
		min-width: 0;
	}
	.teledom-design .section-head .right-block {
		align-self: start;
	}

	/* Bento — 2 columns instead of 4. */
	.teledom-design .bento {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 240px;
	}
	.teledom-design .bento .a,
	.teledom-design .bento .b,
	.teledom-design .bento .c,
	.teledom-design .bento .d {
		grid-column: span 1;
		grid-row: span 1;
	}

	/* Dark feature block — image stacks under text. */
	.teledom-design .dark-block .grid {
		grid-template-columns: 1fr;
	}
	.teledom-design .dark-block .text {
		padding: 50px 32px;
	}
	.teledom-design .dark-block .visual {
		min-height: 300px;
	}

	/* Confcards — single column (pages override per-template if needed). */
	.teledom-design .confcards {
		grid-template-columns: 1fr;
	}

	/* Masonry — 2 columns instead of 4, equal cells. */
	.teledom-design .masonry {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 160px;
	}
	.teledom-design .masonry .m1,
	.teledom-design .masonry .m2,
	.teledom-design .masonry .m3,
	.teledom-design .masonry .m4,
	.teledom-design .masonry .m5,
	.teledom-design .masonry .m6,
	.teledom-design .masonry .masonry-thumb-wrap.m6 {
		grid-column: span 1;
		grid-row: span 2;
	}

	/* Services strip — 2 columns. */
	.teledom-design .services {
		grid-template-columns: 1fr 1fr;
	}

	/* Use-cases (conference rooms) — 2 columns. */
	.teledom-design .use-cases {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Contact card grid — single column. */
	.teledom-design .contact-grid {
		grid-template-columns: 1fr;
	}

	/* Rules list — single column. */
	.teledom-design .rules-list {
		grid-template-columns: 1fr;
	}

	/* CTA strip — text and button stack. */
	.teledom-design .cta-strip {
		grid-template-columns: 1fr;
		padding: 50px 32px;
	}

	/* Numbers strip — 2 columns. */
	.teledom-design .numbers .grid {
		grid-template-columns: 1fr 1fr;
	}

	/* Iframe section — generous padding stays, but headings respect mobile. */
	.teledom-design .section-iframe {
		padding: 60px 0;
	}
}

/* =================================================================
 * Mobile (≤ 720 px)
 * ================================================================= */

@media (max-width: 720px) {
	.teledom-design .container {
		padding: 0 22px;
	}

	/* Hero stats strip — hidden on mobile entirely. The four cards (31
	 * izieb, 200 m, 90 osôb, 25+ rokov) crowd the hero too much and the
	 * marketing message reads better with just the headline + CTAs. */
	.teledom-design .hero-stats {
		display: none;
	}

	/* Hero CTAs (Rezervovať pobyt / Objaviť reštauráciu) keep horizontal
	 * layout instead of stacking — both buttons on one row to look like
	 * a tap-target pair. flex-wrap allows fall-through on tiny screens. */
	.teledom-design .hero-actions {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
	}
	.teledom-design .hero-actions .btn {
		flex: 1 1 calc(50% - 5px);
		min-width: 0;
		justify-content: center;
		text-align: center;
		padding-left: 14px;
		padding-right: 14px;
		font-size: 14px;
	}

	/* About .visual on mobile — keep the corner image overlapping for a
	 * polished editorial look (instead of stacking flat below). Smaller,
	 * offset to bottom-right with a soft shadow. */
	.teledom-design .about .visual {
		position: relative;
	}
	.teledom-design .about .visual .main {
		border-radius: 14px;
	}
	.teledom-design .about .visual .corner {
		position: absolute;
		bottom: -16px;
		right: -8px;
		width: 46%;
		max-width: 220px;
		margin-top: 0;
		box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
		border-radius: 12px;
		overflow: hidden;
	}
	.teledom-design .about .visual .corner img {
		display: block;
		width: 100%;
		height: auto;
	}
	/* Add bottom margin so the .corner doesn't overlap with text below. */
	.teledom-design .about .grid > .visual {
		margin-bottom: 24px;
	}

	/* Sections — significantly tighter. The desktop default is 100 px;
	 * 60 px on mobile keeps rhythm without wasting vertical space. */
	.teledom-design section {
		padding: 60px 0;
	}

	.teledom-design section.compact {
		padding: 0 0 16px;
	}

	/* Typography — scale headings down for narrow columns. */
	.teledom-design h1 {
		font-size: clamp(34px, 8vw, 48px);
	}
	.teledom-design h2 {
		font-size: clamp(28px, 7vw, 40px);
	}
	.teledom-design h3 {
		font-size: clamp(22px, 5.5vw, 30px);
	}

	/* Booking-hero on mobile — smaller padding, smaller heading. */
	.teledom-design .booking-hero {
		padding: 80px 0 48px;
	}
	.teledom-design .booking-hero h1 {
		font-size: clamp(32px, 8vw, 48px);
	}
	.teledom-design .booking-hero .lead {
		font-size: 15px;
	}
	.teledom-design .booking-hero .meta-card {
		padding: 20px;
	}
	.teledom-design .booking-hero .meta-card .row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	/* Page banner mobile padding. */
	.teledom-design .page-banner {
		padding: 60px 0 40px;
	}
	.teledom-design .page-banner .crumbs {
		flex-wrap: wrap;
		font-size: 10px;
	}

	/* Section-head — refined mobile spacing. The right-block lead text
	 * sits IMMEDIATELY below the heading (no centered gap), the CTA
	 * button breaks onto its own line full-width-ish for a clear tap
	 * target. Tight 14 px gap keeps the eyebrow → h2 → p → button rhythm
	 * compact and skim-friendly. */
	.teledom-design .section-head {
		margin-bottom: 28px;
		gap: 14px;
	}
	.teledom-design .section-head h2 {
		line-height: 1.15;
		max-width: 100%;
		margin: 0;
	}
	.teledom-design .section-head .right-block {
		align-self: start;
	}
	.teledom-design .section-head .right-block p {
		font-size: 15px;
		line-height: 1.55;
		margin: 0;
	}
	.teledom-design .section-head .right-block .btn {
		margin-top: 16px;
	}

	/* Bento item — body content overflow safety. The desktop bento has
	 * `position: absolute` body anchored to the bottom of the tile; on
	 * mobile the tile is shorter (200 px from the 1100 px override),
	 * which makes the absolute body's text spill over. Tighter padding,
	 * hidden lead, smaller h3, and stacked stats keep everything inside. */
	.teledom-design .bento .item .body {
		padding: 18px 18px 18px;
	}
	.teledom-design .bento .item h3 {
		font-size: 22px;
		margin-bottom: 4px;
	}
	.teledom-design .bento .item .lead {
		display: none;          /* on tiny tiles, lead text reads as overflow */
	}
	.teledom-design .bento .item .stats {
		gap: 14px;
		padding: 10px 0 0;
		margin-top: 10px;
		flex-wrap: wrap;
	}
	.teledom-design .bento .item .stats > div {
		min-width: 0;
	}
	.teledom-design .bento .item .stats .v {
		font-size: 16px;
	}
	.teledom-design .bento .item .stats .l {
		font-size: 8.5px;
	}
	.teledom-design .bento .item .cta {
		font-size: 12px;
	}

	/* Single-column grids that were 2-col on tablet. */
	.teledom-design .services {
		grid-template-columns: 1fr;
	}

	.teledom-design .numbers .grid {
		grid-template-columns: 1fr;
	}

	.teledom-design .use-cases {
		grid-template-columns: 1fr;
	}

	.teledom-design .bento {
		grid-template-columns: 1fr;
		grid-auto-rows: 200px;
	}

	/* Masonry on mobile — "album / folder" feel.
	 *
	 * Asymmetric two-column layout with a wide hero on top, a 2×2 thumb
	 * grid in the middle, and a banner-style image at the bottom that
	 * carries an "Otvoriť galériu" pill — invites the visitor to tap
	 * and see more without making the rest of the page taller than
	 * necessary. Each photo gets soft rounded corners + a subtle drop
	 * shadow so they read as physical prints, plus a gentle scale-down
	 * on touch (`:active`) for tactile feedback.
	 *
	 * Tapping any image opens the existing lightbox (handled by JS in
	 * assets/js/modules/masonry-lightbox.js, no changes needed). */
	.teledom-design .masonry {
		position: relative;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: none;
		grid-auto-rows: auto;
		gap: 8px;
	}

	.teledom-design .masonry img,
	.teledom-design .masonry .masonry-thumb-wrap {
		width: 100%;
		height: auto;
		object-fit: cover;
		border-radius: 14px;
		box-shadow:
			0 6px 18px rgba(0, 0, 0, 0.10),
			0 1px 4px  rgba(0, 0, 0, 0.06);
		transition:
			transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
			box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.teledom-design .masonry img:active {
		transform: scale(0.97);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
	}

	/* m1 hidden on mobile — the 2×2 thumb grid + bottom banner already
	 * read as a "folder of photos" without it, and dropping the
	 * full-width hero saves vertical space at narrow widths. */
	.teledom-design .masonry .m1 {
		display: none;
	}

	/* m2-m5 — square thumbs in a 2×2 sub-grid. */
	.teledom-design .masonry .m2,
	.teledom-design .masonry .m3,
	.teledom-design .masonry .m4,
	.teledom-design .masonry .m5 {
		grid-column: span 1;
		grid-row: auto;
		aspect-ratio: 1;
	}

	/* m6 = banner strip at the bottom. */
	.teledom-design .masonry .m6,
	.teledom-design .masonry .masonry-thumb-wrap.m6 {
		grid-column: 1 / -1;
		grid-row: auto;
		aspect-ratio: 16 / 7;
	}

	/* Hero-stats — single column on mobile. */
	.teledom-design .hero-stats {
		grid-template-columns: 1fr;
		gap: 18px 0;
		padding: 22px 22px 0;
	}
	.teledom-design .hero-stats .item,
	.teledom-design .hero-stats .item + .item,
	.teledom-design .hero-stats .item:nth-child(even) {
		padding: 18px 0 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.06);
	}
	.teledom-design .hero-stats .item:first-child {
		border-top: 0;
		padding-top: 0;
	}

	/* About — tighter gap, smaller corner image. */
	.teledom-design .about .grid {
		gap: 40px;
	}

	/* Confcards — image height shrinks on small screens. */
	.teledom-design .confcards .confcard .img {
		height: 220px;
	}

	/* CTA strip — tighter padding. */
	.teledom-design .cta-strip {
		padding: 40px 24px;
		text-align: center;
	}

	/* FAQ — smaller question font. */
	.teledom-design .faq .faq-q {
		font-size: 15px;
	}

	/* Iframe section — tighter padding. */
	.teledom-design .section-iframe {
		padding: 40px 0;
	}

	.teledom-design .iframe-wrap iframe {
		min-height: 600px;
	}

	/* Footer credits / copyright */
	.teledom-design .footer-credits {
		flex-direction: column;
		gap: 12px;
		text-align: center;
	}
}

/* =================================================================
 * Fine mobile (≤ 540 px)  — typically iPhone SE / Pixel small
 * ================================================================= */

@media (max-width: 540px) {
	.teledom-design .container {
		padding: 0 16px;
	}

	.teledom-design section {
		padding: 48px 0;
	}

	.teledom-design h1 {
		font-size: clamp(30px, 9vw, 40px);
	}
	.teledom-design h2 {
		font-size: clamp(24px, 7vw, 32px);
	}

	/* Booking-hero — even tighter. */
	.teledom-design .booking-hero {
		padding: 60px 0 36px;
	}
	.teledom-design .booking-hero h1 {
		font-size: clamp(28px, 9vw, 38px);
	}

	/* Numbers — show only the BIG num + label, hide descriptor on tiny
	 * screens to keep the strip compact and skimmable. */
	.teledom-design .numbers .item .desc {
		display: none;
	}

	.teledom-design .numbers .num {
		font-size: clamp(34px, 11vw, 50px);
	}

	/* Page-banner */
	.teledom-design .page-banner {
		padding: 50px 0 32px;
	}

	/* Confcard image even shorter on tiny phones. */
	.teledom-design .confcards .confcard .img {
		height: 180px;
	}

	/* Masonry — single column, smaller rows. */
	.teledom-design .masonry {
		grid-auto-rows: 180px;
	}

	/* CTA strip — minimal padding. */
	.teledom-design .cta-strip {
		padding: 32px 18px;
	}

	/* Bento — on tiny screens flip from absolute body overlay to a clean
	 * stacked card so all text fits naturally. The image becomes a
	 * fixed-aspect cover, body flows below it inside the tile. */
	.teledom-design .bento {
		grid-auto-rows: auto;
		gap: 14px;
	}
	.teledom-design .bento .item {
		min-height: 0;
	}
	.teledom-design .bento .item .img,
	.teledom-design .bento .item img {
		height: 200px;
	}
	.teledom-design .bento .item .body {
		position: relative;
		inset: auto;
		padding: 16px 18px 18px;
		background: rgba(0, 0, 0, 0.65);
	}
	.teledom-design .bento .item .stats {
		justify-content: flex-start;
	}

	/* Hero CTAs — switch back to stacked on really tiny widths if a
	 * 50/50 row would force ellipsis. */
	.teledom-design .hero-actions .btn {
		flex: 1 1 100%;
		font-size: 13.5px;
	}
}

/* =================================================================
 * Flatpickr calendar — center on small viewports so its 312 px width
 * doesn't get clipped. The booking-bar inputs sit at the bottom of the
 * screen so the picker opens upward — make sure it fits the viewport.
 * ================================================================= */

@media (max-width: 380px) {
	.flatpickr-calendar.tdom-bb-calendar {
		left: 50% !important;
		transform: translateX(-50%) !important;
	}
}