/**
 * Layout for [hub_ring_mini_configurator] (templates/mini-configurator.php).
 * This is an ADDITIVE stylesheet, loaded alongside configurator.css
 * (never edited -- customer's own "finalized, no unsolicited changes"
 * standing rule for that file) -- it reuses .hrc, the .hrc-precision-
 * field/input classes, .hrc-button, and every --hrc- custom property
 * straight from there, and adds only what this widget's own
 * single-panel layout needs.
 *
 * Deliberately its OWN panel style (not .hrc-card) -- rounded corners
 * (8px, matched to the live homepage's own orange text box next to
 * this widget, measured via getComputedStyle) and no shadow, both the
 * opposite of .hrc-card's sharp corners + --hrc-shadow (customer,
 * 2026-09-03, after seeing the widget actually placed on the page:
 * "a sarkok lekerekítése egyezzen meg a narancs szövegdoboz
 * sarkaival... árnyék nem kell").
 */

/* .hrc itself carries "background: var(--hrc-bg)" (#faf9f7) from
   configurator.css, meant for the full configurator's own page-level
   spacing. Here that root div sits directly behind .hrc-mini-panel's
   rounded corners, and #faf9f7 is JUST different enough from the
   panel's own #f5f3f0 fill that the mismatch showed through at each
   rounded corner as a faint discolored sliver -- read by the customer
   as "kosz" (dirt) under the rounding, not a clean curve (2026-09-03:
   "a sarkok lekerekítése valahogy fura, olyan, mintha valami kosz
   lenne alatta"). Transparent here removes that second background
   entirely, so only the true page background (white) can ever show
   through the curve. Also stretched to the Breakdance column's own
   height (that column is itself equal-height-stretched against its
   sibling, the orange text box) so .hrc-mini-panel below can fill AT
   LEAST that height dynamically instead of sizing to its own content
   (2026-09-03: "ne legyen fix magassága az egész panelnek,
   dinamikusan töltse ki a rendelkezésre álló helyet") -- but the panel
   is still free to grow TALLER than that when its own content (the
   button under the ring, added 2026-09-04) needs more room than the
   matched orange-box height provides; flex items never shrink below
   their content's own minimum size by default, so this "at least"
   behavior falls out of flex:1 below without extra rules. */
.hrc-mini {
	background: transparent;
	height: 100%;
	display: flex;
}

.hrc-mini-panel {
	display: grid;
	/* Narrower than the first cut (was minmax(180px,1fr) 2fr) -- the
	   fields themselves can be tighter, leaving more room for the ring
	   drawing, which scales up to fill whatever width its column gets
	   (2026-09-03: "a mezők lehetnek szűkebbek, a gyűrű kicsit
	   nagyobb"). */
	grid-template-columns: minmax( 150px, 1fr ) 2.3fr;
	/* "start", not the default stretch+center combo from the previous
	   round -- now that the right column carries the button under the
	   ring (2026-09-04) it's naturally taller than the left column's 2
	   fields, and top-aligning both (instead of vertically centering
	   each within a shared, taller row) is what actually reads as "the
	   fields/ring moved up" in the customer's own before/after mockup
	   (2026-09-04: "a dobozban feljebb került a két beviteli mező...
	   feljebb került a gyűrű rajza") -- centering them in the now-taller
	   row would have pushed them DOWN, not up, relative to the previous
	   (shorter, button-less) layout. */
	align-items: start;
	/* Centers the fields+ring+button block as a WHOLE within any
	   surplus height the panel gets from matching a taller orange box
	   (via flex:1 below) -- without this, the default ("normal", which
	   behaves as stretch) would instead stretch the auto-sized row
	   tracks themselves to fill that surplus, enlarging the gap
	   between the ring and the button rather than repositioning the
	   whole group. When the panel is exactly its natural content
	   height (no orange-box-driven surplus), this is a no-op --
	   nothing to distribute, so the layout looks identical to before
	   (2026-09-04: "felül maradjon a mostani, mint minimum, de ha
	   magasabb lesz az egész szekció a nagyobb narancs doboz miatt,
	   akkor a teljes tartalom legyen mindig a doboz középvonalához
	   igazítva"). */
	align-content: center;
	column-gap: 24px;
	/* Small, not the 24px used between the two columns -- the button
	   (now its own row spanning both columns, see .hrc-mini-finish
	   below) needs to sit close under the ring, not with a full
	   column-sized gap under it (2026-09-04: "kerüljön sokkal feljebb,
	   közelebb a kereséshez/képhez"). */
	row-gap: 8px;
	/* A pale off-white, not .hrc-card's plain --hrc-card-bg (#fff) --
	   on this page the surrounding section is ALSO plain white, so the
	   panel was reading as invisible/borderless (customer, 2026-09-03:
	   "legyen egy halvány színe a doboznak, mert most ugyanolyan
	   fehér, mint a háttér"). */
	background: #f5f3f0;
	border-radius: 8px;
	/* Bottom padding removed -- it left a fixed dead strip under the
	   button that had nothing to do with matching the orange box's
	   height (customer, 2026-09-04: "a gomb alatt van padding, vagy
	   spacing? ha igen, akkor az tűnjön el"). The top 20px stays as
	   the floor/minimum the same message asks for; any EXTRA height
	   (from the orange-box match) is handled by align-content:center
	   above instead of a fixed bottom value. */
	padding: 20px 20px 0;
	flex: 1;
	min-width: 0;
}

.hrc-mini-inputs {
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* Measured live (getBoundingClientRect) against the ring's own
	   topmost dimension arrow. First pass aligned the label's TOP to
	   the arrow (37px); the customer then asked for the label's BOTTOM
	   to line up with it instead (2026-09-04: "a felni középfurat...
	   szöveg alja legyen inkább egyvonalban a méretező nyíllal") -- the
	   label is ~26px tall, so that needs 26px less margin than before
	   (37 - 26 = 11). */
	margin-top: 11px;
}

/* The full configurator's own field label never needed this -- it has
   more horizontal room. Here, with the input column narrowed above,
   "Felni középfurat átmérő (Ø mm)" wraps to two lines; the label is
   allowed to run past the input's own width instead (customer,
   2026-09-03: "a Felni középfurat átmérő (Ø mm) legyen no-wrap"). */
.hrc-mini-inputs .hrc-field-label {
	white-space: nowrap;
}

.hrc-mini-preview {
	position: relative;
	width: 100%;
	min-height: 280px;
	/* The ring itself sits slightly lower than the drawing's own
	   allotted box (empty space below it, previously partly filled by
	   the now-hidden "U – peremes" caption) -- nudged up so it lines
	   up with the vertical center of the left column's content
	   (2026-09-03: "a 3D kép kerüljön egy kicsit feljebb, kb 30-40
	   pixellel, hogy optikailag a bal oldali összes tartalomhoz
	   középre igazodjon horizontálisan"). A transform (not a margin)
	   so it's a purely visual nudge that doesn't change how tall this
	   box itself is computed to be -- see .hrc-mini-finish's own
	   negative margin below for why that distinction matters once the
	   button sits directly under this box. */
	transform: translateY( -35px );
}

/* Own grid row, spanning both columns, so it centers against the
   FULL panel width -- not just the (narrower) preview column it used
   to sit under (2026-09-04: "a gomb legyen középre helyezve a teljes
   minikonfigurátor szélességéhez képest"). */
.hrc-mini-finish {
	grid-column: 1 / -1;
	justify-self: center;
	width: auto;
	/* .hrc-mini-preview above is only VISUALLY shifted up 35px (a
	   transform, its layout box is untouched) -- so without this, the
	   button would start a full 35px below where the ring now actually
	   appears to end, on top of the row-gap. -30px wasn't enough --
	   the customer asked for it to move up by at least one more of its
	   OWN heights (2026-09-04: "menjen még feljebb az a gomb, legalább
	   egy gombnyival") -- the button is 46px tall, so -30 - 46 = -76. */
	margin-top: -76px;
	/* Real bug, found 2026-09-04 via a live click test (customer: "a
	   fent lévő méretalapú konfigurátor nem minden esetben
	   kattintható") -- .hrc-mini-preview's own `transform` above
	   promotes it into a stacking context that CSS paints AFTER plain
	   static in-flow siblings, regardless of DOM order, so the SVG ring
	   drawing was rendering ON TOP of this button wherever the negative
	   margin's overlap landed (confirmed live:
	   document.elementFromPoint() on the button's own center returned
	   the preview's <svg>, not the button) -- clickable only in
	   whatever sliver wasn't covered, which varies with the ring
	   drawing's own rendered height (H vs U type, dimension-line
	   stacking, etc.), matching "not always clickable". position +
	   z-index put this button in that same later paint phase, and
	   being later in DOM order than .hrc-mini-preview there, it now
	   always wins regardless of how much the negative margin overlaps. */
	position: relative;
	z-index: 1;
	/* 2026-09-04, customer: "a mini konfigurátorban a gomb legyen all
	   caps" -- scoped to this widget's own button only, not the shared
	   .hrc-button-primary base (the full configurator's "Kosárba
	   helyezés" stays as-is). */
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* The ring-type caption ("U – peremes" / "H – egyenes") that
   HubRingPreview.renderIso() always draws under the 3D view is
   dropped ONLY here via CSS, not in preview.js itself -- the full
   configurator still needs it, this widget doesn't collect Ring_type
   at all so showing its silent default would be misleading (customer,
   2026-09-03: "vedd le a 3D nézetből az U-peremes feliratot, de csak
   itt"). .hrc-callout-label-muted is used solely for this caption in
   the iso/measurement views (checked assets/js/preview.js) -- no
   other text shares the class, so hiding it here can't hide anything
   else this widget shows. */
.hrc-mini-preview .hrc-callout-label-muted {
	display: none;
}

/* The dimension-line labels ("Ø 67,1 mm" etc.) sit on a small opaque
   rect that breaks the line running through them -- configurator.css
   hardcodes that rect's fill to plain white (#fff), which reads fine
   against the full configurator's own white preview panel but showed
   as a visible white patch against this widget's pale #f5f3f0 panel
   (customer, 2026-09-04: "a vonalakon áthaladó méretezések háttere
   most fehér, az legyen megegyező a doboz háttérszínével"). Matched
   here, scoped to this widget only. */
.hrc-mini-preview .hrc-dim-label-bg {
	fill: #f5f3f0;
}

@media ( max-width: 640px ) {
	.hrc-mini-panel {
		grid-template-columns: 1fr;
	}
}