/**
 * Kilincscentrum – Reszponzív réteg
 * =============================================================================
 * Mobil-first. Az előző fájlok alapállapota a legkisebb képernyőre szól,
 * itt csak min-width alapú bővítések vannak.
 *
 * Használt töréspontok (forrás: tokens.css 12. szakasz):
 *    480px  --kc-bp-sm   nagy telefon
 *    768px  --kc-bp-md   tablet
 *    900px  --kc-bp-nav  HIVATALOS mobil navigációs törés
 *   1200px  --kc-bp-lg   asztali
 *
 * A CSS nem enged custom property-t @media feltételben, ezért itt nyers
 * értékek szerepelnek. Töréspont módosításakor a tokens.css dokumentációs
 * értékeit is frissíteni kell.
 *
 * Fontos: a 900 px kizárólag a navigáció hivatalos törése. A többi
 * komponens szándékosan más töréspontokat és folyékony méretezést használ,
 * hogy ne egyetlen értéktől függjön a teljes felület.
 * =============================================================================
 */

/* -----------------------------------------------------------------------------
 * 480 px felett – nagy telefon
 * -------------------------------------------------------------------------- */
@media (min-width: 480px) {

	/* Mobilon a teljes szélességű gomb az alapértelmezett minta; efelett a
	 * gomb már a tartalmához igazodhat. */
	.kc-btn--block\@sm {
		display: inline-flex;
		width: auto;
	}

	.kc-card__header,
	.kc-card__body,
	.kc-card__footer {
		padding: var(--kc-space-5);
	}
}

/* -----------------------------------------------------------------------------
 * 768 px felett – tablet
 * -------------------------------------------------------------------------- */
@media (min-width: 768px) {

	/* A dialógus mobilon alulról feljövő lap, tableten középre igazított
	 * ablak. */
	.kc-dialog {
		align-items: center;
		padding: var(--kc-space-6);
	}

	.kc-dialog__panel {
		width: min(100%, 40rem);
		max-height: 84dvh;
		border-radius: var(--kc-radius-card);
	}

	.kc-dialog__header,
	.kc-dialog__body,
	.kc-dialog__footer {
		padding: var(--kc-space-6);
	}

	.kc-drawer__panel {
		width: min(70vw, 26rem);
	}

	.kc-surface {
		padding: var(--kc-space-6);
	}
}

/* -----------------------------------------------------------------------------
 * 900 px felett – hivatalos navigációs törés
 * Csak a navigációhoz kötődő segédosztályok tartoznak ide.
 * -------------------------------------------------------------------------- */
@media (min-width: 900px) {

	/* Elem, amely csak a mobil navigációs sávban jelenik meg. */
	.kc-nav-mobile-only {
		display: none !important;
	}
}

@media (max-width: 899.98px) {

	/* Elem, amely csak az asztali navigációban jelenik meg. */
	.kc-nav-desktop-only {
		display: none !important;
	}

	/* Mobil sávban a drawer közel teljes szélességű lehet. */
	.kc-drawer--nav .kc-drawer__panel {
		width: min(92vw, 24rem);
	}
}

/* -----------------------------------------------------------------------------
 * 1200 px felett – asztali
 * -------------------------------------------------------------------------- */
@media (min-width: 1200px) {

	.kc-dialog__panel {
		width: min(100%, 48rem);
	}
}

/* -----------------------------------------------------------------------------
 * Bemeneti mód szerinti finomítás
 * Érintőképernyőn nincs valódi hover állapot, ezért a hover-hatásokat csak
 * egérrel vezérelt eszközön kapcsoljuk be.
 * -------------------------------------------------------------------------- */
@media (hover: none) {

	.kc-card--interactive:hover {
		border-color: var(--kc-color-border);
		box-shadow: var(--kc-shadow-xs);
	}
}

/* -----------------------------------------------------------------------------
 * Nyomtatás
 * A lebegő rétegek nyomtatásban nem jelenhetnek meg.
 * -------------------------------------------------------------------------- */
@media print {

	.kc-dialog,
	.kc-drawer {
		display: none !important;
	}
}