/**
 * Busly — layout.css
 * Container, section rhythm, grid systems, sidebar layout.
 */

.wrap {
	max-width: var(--busly-container, 1180px);
	margin: 0 auto;
	padding: 0 28px;
}
body.busly-layout-full-width .wrap { max-width: none; }

/* NOT a bare `section` element selector on purpose: the homepage is built
   entirely with Elementor, and every Elementor section wrapper is itself a
   literal <section> tag (class="elementor-section ..."). A generic `section`
   selector here was silently adding this padding to EVERY Elementor section
   on the page — on top of each widget's own internal padding — which is
   very likely the real explanation for the oversized gaps around the hero
   and search widgets. `.busly-section` is only applied by our own code, so
   scope to that class alone. */
.busly-section { padding: 88px 0; }
.busly-section--tight { padding: 56px 0; }
.busly-section--alt { background: var(--busly-s50); }

.sec-eye {
	font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
	color: var(--busly-primary); margin-bottom: 8px;
}
.sec-h {
	font-size: clamp(1.55rem, 2.5vw, 2.1rem); font-weight: 900;
	color: var(--busly-s900); letter-spacing: -.025em; line-height: 1.2; margin-bottom: 10px;
}
.sec-p { font-size: 14.5px; color: var(--busly-s500); line-height: 1.72; max-width: 460px; }
.sec-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.sec-hd { margin-bottom: 40px; }
.sec-centered { text-align: center; max-width: 480px; margin: 0 auto 40px; }
.sec-centered .sec-p { margin: 0 auto; }
.see-all {
	font-size: 13px; font-weight: 700; color: var(--busly-primary);
	display: flex; align-items: center; gap: 3px; flex-shrink: 0; transition: opacity .15s;
}
.see-all:hover { opacity: .7; }
.see-all svg { width: 14px; height: 14px; }

/* Grid systems */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* Content + sidebar layout (blog / shop) */
.busly-content-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.busly-layout-right-sidebar .busly-content-grid,
.busly-layout-left-sidebar .busly-content-grid {
	grid-template-columns: minmax(0, 1fr) 320px;
}
.busly-layout-left-sidebar .busly-content-grid { grid-template-columns: 320px minmax(0, 1fr); }
.busly-layout-left-sidebar .busly-content-col { order: 2; }
.busly-layout-left-sidebar .busly-sidebar { order: 1; }
/* The content column's breadcrumb/title block (.busly-page-header, 48px top
   padding) pushes its actual entry-content down — the sidebar has no
   equivalent above its first widget, so without this it starts noticeably
   higher than the main column and looks flush against the header. */
.busly-sidebar { margin-top: 48px; }
.busly-no-sidebar .busly-content-grid { grid-template-columns: 1fr; }

/* Top padding must be >= the fixed header's own height (66px, header.css)
   — some templates (single.php, author.php) print content/breadcrumbs
   right at the top of .busly-main with no extra wrapper padding of their
   own, so anything less here clips under the header. */
.busly-main { padding: 66px 0 88px; }
.busly-elementor-canvas.busly-main { padding: 0; }
/* Elementor content still renders inside the theme's normal header/footer
   (only a true Elementor Canvas *template*, which this theme doesn't use,
   would remove them) — the fixed header needs the same top clearance here
   as everywhere else, plus a little breathing room so the first line of
   content doesn't start flush against the header's bottom edge (there's no
   automatic breadcrumb here to provide that spacing — it's an opt-in
   "Busly Breadcrumbs" widget now, added manually per page). Skipped only
   on the transparent front-page header, where the hero's own padding-top
   already reserves that space so its photo can still reach y:0 behind
   the header. */
body:not(.busly-header-transparent) .busly-elementor-canvas.busly-main { padding-top: 98px; }

/* Elementor's own default CSS puts padding on the populated widget-wrap
   inside every column (frontend.min.css) — on our full_width homepage
   sections this pushes each widget's own content inward/downward from
   what our widgets' CSS assumes is the section's true edge (e.g. the
   hero photo not actually reaching the very top of the page, its left
   edge landing 10px right of the header's logo instead of aligning with
   it, or extra whitespace stacking on top of a widget's own padding).
   Zero it out theme-wide so every Busly section renders exactly
   edge-to-edge.

   `body` prefix is required, not decorative: Elementor's own frontend.css
   defines the exact same selector (`.elementor-column-gap-default>
   .elementor-column>.elementor-element-populated{padding:10px}`) at the
   exact same specificity, and it's enqueued AFTER every busly-*.css file —
   on an equal-specificity tie the later rule always wins, so without this
   extra qualifier Elementor's 10px silently wins regardless of source
   order in this file. */
body .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
	padding: 0;
}

/* Full-bleed helper for Elementor "stretch section" rows inside a boxed page */
.e-con.e-flex.busly-fullbleed,
.elementor-section.busly-fullbleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

/* Default sizing for generic Elementor widgets an author drops directly
   into page content (Text Editor, Heading, Image, Icon List, etc.) —
   without it they render flush against whatever container they're in and
   can run edge-to-edge. Capped to the theme's own container width so they
   line up with the header/footer, centered, with a small breathing-room
   padding. The theme's own busly-* widgets (Hero, CTA, Features, ...)
   already manage their own full-bleed backgrounds/padding, so they're
   excluded by name here to avoid doubling up. Still fully overridable
   per-instance via that widget's own Advanced > Padding control in
   Elementor, since an inline style always beats this class rule. Current
   Elementor markup (4.x, "optimized markup" on) renders widget content
   directly inside `.elementor-widget` — there's no separate
   `.elementor-widget-container` wrapper to target instead. */
.elementor-widget:not([class*="elementor-widget-busly-"]) {
	max-width: var(--busly-container, 1180px);
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
}

@media (max-width: 1024px) {
	.grid-4, .dest-grid { grid-template-columns: repeat(2, 1fr); }
	.busly-layout-right-sidebar .busly-content-grid,
	.busly-layout-left-sidebar .busly-content-grid { grid-template-columns: 1fr; }
	.busly-layout-left-sidebar .busly-content-col,
	.busly-layout-left-sidebar .busly-sidebar { order: initial; }
}
@media (max-width: 760px) {
	.grid-4, .dest-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.grid-4, .dest-grid, .grid-2 { grid-template-columns: 1fr; }
}