/*
 * Moduł „Pierwsze ulubione”: panel pustej listy i podpowiedź po pierwszym
 * dodaniu. INM Design System v2: grafit, pistacja na hover, ostre narożniki,
 * bez ramek; pole tylko z dolną linią; fokus jako dolna belka 3 px.
 *
 * Układ zależy od szerokości panelu (zapytania kontenerowe), nie okna, bo
 * lista bywa w węższej kolumnie strony:
 * - od 900 px: siatka 12 kolumn, wstęp i pole w 6, podpowiedzi w 5,
 * - 600 do 899 px: jedna kolumna, tekst i pole do 584 px,
 * - poniżej 600 px: jedna kolumna, „Dodaj” pod tytułem.
 * Margines boczny daje kontener strony; panel nie dodaje własnego.
 *
 * Reguły mają co najmniej 0,3,0 (stany 0,4,0), żeby wygrać z resetem
 * motywu i kitem Elementora bez !important.
 */

.inm-favorites-list .inm-start[hidden],
.inm-favorites-list .inm-start .inm-start-popular[hidden] { display: none; }

.inm-favorites-list .inm-start {
	container-type: inline-size;
	margin: 0; padding: 0; min-width: 0;
	font-family: var(--inm-font, 'Poppins', sans-serif);
	color: var(--inm-text-dark, #303431);
}
.inm-favorites-list .inm-start .inm-start-icon { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Układ */
.inm-favorites-list .inm-start .inm-start-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 48px; align-items: start; }
.inm-favorites-list .inm-start .inm-start-main { display: flex; flex-direction: column; gap: 32px; max-width: 584px; min-width: 0; }

/* Wstęp: nagłówek → lead 12 */
.inm-favorites-list .inm-start .inm-start-intro { display: flex; flex-direction: column; gap: 12px; }
.inm-favorites-list .inm-start .inm-start-title {
	margin: 0; padding: 0; font-family: var(--inm-font-display, 'Bebas Neue', sans-serif); font-size: 36px; font-weight: 400;
	line-height: 1.05; letter-spacing: var(--inm-tracking-tight, .01em); text-transform: none; color: var(--inm-text-dark, #303431);
}
.inm-favorites-list .inm-start .inm-start-lead { margin: 0; max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--inm-text-dark, #303431); }
.inm-favorites-list .inm-start .inm-start-lead .inm-start-icon { vertical-align: -2px; stroke-width: 2; }

/* Wyszukiwarka: etykieta → pole 8, pole → podpowiedź 8 */
.inm-favorites-list .inm-start .inm-start-search { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.inm-favorites-list .inm-start .inm-start-label { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--inm-text-dark, #303431); }
.inm-favorites-list .inm-start .inm-start-field { position: relative; display: flex; align-items: center; }
.inm-favorites-list .inm-start .inm-start-field .inm-start-icon { position: absolute; left: 4px; color: var(--inm-meta, #646B65); stroke-width: 2; pointer-events: none; }
.inm-favorites-list .inm-start .inm-start-input {
	box-sizing: border-box; width: 100%; height: var(--inm-control-height, 52px); margin: 0; padding: 0 12px 0 36px;
	border: 0; border-bottom: 1px solid var(--inm-border-input, #818981); border-radius: 0; background: transparent; box-shadow: none;
	font-family: inherit; font-size: var(--inm-control-font-size, 16px); line-height: 1.4; color: var(--inm-text-dark, #303431);
}
.inm-favorites-list .inm-start .inm-start-input::placeholder { color: var(--inm-meta, #646B65); opacity: 1; }
.inm-favorites-list .inm-start .inm-start-input:focus { outline: none; border: 0; border-bottom: 1px solid var(--inm-focus, #303431); box-shadow: inset 0 -2px 0 var(--inm-focus, #303431); }
.inm-favorites-list .inm-start .inm-start-hint-text { margin: 0; font-size: 13px; line-height: 1.45; color: var(--inm-meta, #646B65); }
.inm-favorites-list .inm-start .inm-start-results:empty { display: none; }
.inm-favorites-list .inm-start .inm-start-results { margin-top: 8px; }
.inm-favorites-list .inm-start .inm-start-status { margin: 0; padding: 16px; background: var(--inm-neutral-100, #F7F8F3); font-size: 14px; line-height: 1.6; }
.inm-favorites-list .inm-start .inm-start-results[aria-busy="true"] .inm-start-status { color: var(--inm-meta, #646B65); }
.inm-favorites-list .inm-start .inm-start-status p { margin: 0; }
.inm-favorites-list .inm-start .inm-start-own { display: block; width: 100%; min-height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: 0; background: var(--inm-neutral-100, #F7F8F3); color: var(--inm-text-dark, #303431); font: inherit; font-size: 14px; font-weight: 600; text-align: left; text-decoration: underline; cursor: pointer; }
.inm-favorites-list .inm-start .inm-start-own:hover { background: var(--inm-brand-hover, #F1F6E0); }
.inm-favorites-list .inm-start .inm-start-own:focus-visible { outline: none; box-shadow: inset 0 -3px 0 var(--inm-text-dark, #303431); }
.inm-favorites-list .inm-start .inm-start-status--error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.inm-favorites-list .inm-start .inm-start-status--error p { flex: 1 1 240px; }

/* Podpowiedzi: nagłówek → opis 4, opis → lista 16 */
.inm-favorites-list .inm-start .inm-start-popular { display: flex; flex-direction: column; min-width: 0; }
.inm-favorites-list .inm-start .inm-start-popular-title {
	margin: 0; padding: 0; font-family: var(--inm-font-display, 'Bebas Neue', sans-serif); font-size: var(--inm-widget-title-size, 32px);
	font-weight: 400; line-height: 1.15; letter-spacing: var(--inm-tracking-tight, .01em); text-transform: none; color: var(--inm-text-dark, #303431);
}
.inm-favorites-list .inm-start .inm-start-popular-lead { margin: 4px 0 16px; font-size: 14px; line-height: 1.6; color: var(--inm-meta, #646B65); }
.inm-favorites-list .inm-start.is-searching .inm-start-popular { display: none; }

/* Wiersz pozycji (wyniki i podpowiedzi): miniatura 3:4 → treść → „Dodaj” */
.inm-favorites-list .inm-start .inm-start-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--inm-border-line, #D5DBD0); }
.inm-favorites-list .inm-start .inm-start-row {
	display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 16px;
	margin: 0; padding: 16px 0; border-bottom: 1px solid var(--inm-border-line, #D5DBD0);
}
.inm-favorites-list .inm-start .inm-start-thumb {
	display: flex; align-items: center; justify-content: center; width: 60px; aspect-ratio: var(--inm-tile-ratio, 3 / 4); overflow: hidden;
	background: var(--inm-neutral-100, #F7F8F3); color: var(--inm-meta, #646B65);
}
.inm-favorites-list .inm-start .inm-start-thumb img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border: 0; border-radius: 0; }
.inm-favorites-list .inm-start .inm-start-row--events .inm-start-thumb img { object-fit: contain; }
.inm-favorites-list .inm-start .inm-start-item-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.inm-favorites-list .inm-start .inm-start-item-meta { margin: 0; font-size: var(--inm-item-meta-size, 13px); line-height: 1.45; color: var(--inm-meta, #646B65); }
.inm-favorites-list .inm-start .inm-start-item-when { font-weight: 600; color: var(--inm-text-dark, #303431); }
.inm-favorites-list .inm-start .inm-start-item-title { margin: 0; font-size: var(--inm-item-title-size, 18px); font-weight: 600; line-height: 1.35; color: var(--inm-text-dark, #303431); overflow-wrap: anywhere; }
.inm-favorites-list .inm-start .inm-start-item-where { margin: 0; font-size: 13px; line-height: 1.45; color: var(--inm-meta, #646B65); overflow-wrap: anywhere; }

/* Przyciski: „Dodaj” drugorzędny (neutralny), błąd z ponowieniem */
.inm-favorites-list .inm-start .inm-start-btn,
.inm-favorites-list .inm-start-added .inm-start-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-height: 44px; margin: 0; padding: 0 16px;
	border: 0; border-radius: var(--inm-radius-button, 0); background: var(--inm-bg-muted, #ECEFE7); color: var(--inm-text-dark, #303431);
	font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; text-transform: none;
	letter-spacing: normal; box-shadow: none; text-shadow: none; cursor: pointer; white-space: nowrap;
	transition: background-color var(--inm-motion-duration, 150ms) ease;
}
.inm-favorites-list .inm-start .inm-start-btn:hover,
.inm-favorites-list .inm-start-added .inm-start-btn:hover {
	background: var(--inm-brand-hover, #F1F6E0); color: var(--inm-on-brand-hover, #303431); border: 0; transform: none;
}
.inm-favorites-list .inm-start .inm-start-btn:focus,
.inm-favorites-list .inm-start-added .inm-start-btn:focus { outline: none; }
.inm-favorites-list .inm-start .inm-start-btn:focus-visible,
.inm-favorites-list .inm-start-added .inm-start-btn:focus-visible { outline: none; box-shadow: inset 0 -3px 0 var(--inm-focus, #303431); }
.inm-favorites-list .inm-start .inm-start-btn .inm-start-icon { stroke-width: 2; }

/* Komputer: dwie kolumny siatki 12 */
@container (min-width: 900px) {
	.inm-favorites-list .inm-start .inm-start-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
	.inm-favorites-list .inm-start .inm-start-main { grid-column: 1 / span 6; max-width: none; }
	.inm-favorites-list .inm-start .inm-start-popular { grid-column: 8 / span 5; }
	.inm-favorites-list .inm-start.is-searching .inm-start-popular:not([hidden]) { display: flex; }
	.inm-favorites-list .inm-start .inm-start-title { font-size: 40px; }
}

/* Telefon: odstępy 32, „Dodaj” pod tytułem */
@container (max-width: 599px) {
	.inm-favorites-list .inm-start .inm-start-grid { row-gap: 32px; }
	.inm-favorites-list .inm-start .inm-start-title { font-size: 32px; }
	.inm-favorites-list .inm-start .inm-start-popular-title { font-size: var(--inm-widget-title-size-sm, 28px); }
	.inm-favorites-list .inm-start .inm-start-popular-lead { margin-bottom: 12px; }
	.inm-favorites-list .inm-start .inm-start-row { grid-template-columns: 60px minmax(0, 1fr); align-items: start; column-gap: 12px; row-gap: 12px; }
	.inm-favorites-list .inm-start .inm-start-thumb { grid-row: span 2; }
	.inm-favorites-list .inm-start .inm-start-row .inm-start-add { grid-column: 2; justify-self: start; }
}

/* Podpowiedź po pierwszym dodaniu */
.inm-favorites-list .inm-start-added {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 16px;
	margin: 0 0 32px; padding: 16px 16px 16px 20px; background: var(--inm-accent-bg, #F1F6E0);
	font-size: 15px; line-height: 1.6; color: var(--inm-text-dark, #303431);
}
.inm-favorites-list .inm-start-added:focus { outline: none; }
.inm-favorites-list .inm-start-added:focus-visible { outline: none; box-shadow: inset 0 -3px 0 var(--inm-focus, #303431); }
.inm-favorites-list .inm-start-added .inm-start-icon { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inm-favorites-list .inm-start-added > .inm-start-icon { margin-top: 2px; fill: var(--inm-green, #EF8F10); stroke: var(--inm-text-dark, #303431); stroke-width: 1.6; }
.inm-favorites-list .inm-start-added .inm-start-added-text p { margin: 0; }
.inm-favorites-list .inm-start-added .inm-start-added-title { font-weight: 600; }
.inm-favorites-list .inm-start-added .inm-start-link,
.inm-favorites-list .inm-start-added .inm-start-link:visited {
	color: var(--inm-text-dark, #303431); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; background: transparent; box-shadow: none;
}
.inm-favorites-list .inm-start-added .inm-start-link:hover { color: var(--inm-text-dark, #303431); background: var(--inm-bg-white, #FAFAFA); }
.inm-favorites-list .inm-start-added .inm-start-link:focus-visible { outline: none; box-shadow: 0 3px 0 var(--inm-focus, #303431); }
.inm-favorites-list .inm-start-added .inm-start-close { width: 44px; height: 44px; padding: 0; background: transparent; }
.inm-favorites-list .inm-start-added .inm-start-close:hover { background: var(--inm-bg-white, #FAFAFA); }

@media (max-width: 600px) {
	.inm-favorites-list .inm-start-added { gap: 12px; margin-bottom: 24px; padding: 16px 8px 16px 16px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.inm-favorites-list .inm-start .inm-start-btn,
	.inm-favorites-list .inm-start-added .inm-start-btn { transition: none; }
}