/*
 * Wersja C „Jasna”: strona główna. Hero na całą szerokość w zaokrąglonej ramce z tytułem na zdjęciu,
 * wyśrodkowany pasek informacji z ikoną nad tekstem, dwa duże kafle kategorii 4:5 z podpisem i pigułką na zdjęciu,
 * nosidła jako duże karty, „Jak to działa” wyśrodkowane, sekcje pół na pół (zdjęcie do krawędzi i tekst
 * wyśrodkowany obok), Little Traveller na pudrowym różu, pytania jako akordeon z cienką linią.
 */

.wyglad-jasna .j-tytul-srodek { text-align: center; }
.wyglad-jasna .section__title { font-size: 34px; }
@media (min-width: 640px) { .wyglad-jasna .section__title { font-size: 44px; } }

/* Hero: zdjęcie w zaokrąglonej ramce, tytuł na zdjęciu, gradient od dołu (na telefonie mocniejszy) */
.wyglad-jasna .hero { padding: 12px var(--gutter-r) 0 var(--gutter-l); background: #FFFFFF; }
.wyglad-jasna .hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 600px; overflow: hidden; border-radius: var(--radius-xl); background: var(--c-soft); }
.wyglad-jasna .hero__photo { position: absolute; inset: 0; height: auto; min-height: 0; }
.wyglad-jasna .hero__frame { inset: 0; border-radius: 0; }
.wyglad-jasna .hero__frame img { object-position: center 35%; }
.wyglad-jasna .hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 12, .82) 0%, rgba(10, 10, 12, .66) 45%, rgba(10, 10, 12, .4) 70%, rgba(10, 10, 12, 0) 92%); }
.wyglad-jasna .hero .dots { display: none !important; }
.wyglad-jasna .hero__text { position: relative; z-index: 1; justify-content: flex-end; align-items: center; gap: 16px; padding: 32px 20px; text-align: center; color: #FFFFFF; text-shadow: 0 1px 16px rgba(0, 0, 0, .25); }
.wyglad-jasna .hero__title { max-width: 16ch; font-size: 40px; color: #FFFFFF; }
.wyglad-jasna .hero__lead { max-width: 34rem; font-size: 15px; color: #FFFFFF; }
.wyglad-jasna .hero__actions { justify-content: center; gap: 12px 24px; }
.wyglad-jasna .hero .btn--primary { background: #FFFFFF; color: var(--c-ink); text-shadow: none; }
.wyglad-jasna .hero .btn--primary:hover { background: var(--c-soft); color: var(--c-ink); }
.wyglad-jasna .hero .link-underline { display: inline-flex; align-items: center; min-height: 44px; color: #FFFFFF; }
.wyglad-jasna .hero__note { color: #FFFFFF; font-size: 14px; }
/* Fokus na zdjęciach: biała obwódka (czarna z base.css ginie na ciemnym gradiencie) */
.wyglad-jasna .hero :focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.wyglad-jasna .category-card:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
@media (min-width: 640px) {
	.wyglad-jasna .hero__title { font-size: 56px; }
	.wyglad-jasna .hero__photo::after { background: linear-gradient(to top, rgba(10, 10, 12, .8) 0%, rgba(10, 10, 12, .62) 38%, rgba(10, 10, 12, .46) 62%, rgba(10, 10, 12, .12) 84%, rgba(10, 10, 12, 0) 95%); }
}
@media (min-width: 1024px) {
	.wyglad-jasna .hero { padding-top: 16px; }
	.wyglad-jasna .hero__grid { min-height: 680px; max-width: 1440px; margin-inline: auto; }
	.wyglad-jasna .hero__text { padding: 64px; }
	.wyglad-jasna .hero__title { font-size: 72px; }
	.wyglad-jasna .hero__lead { font-size: 18px; }
}

/* Pasek informacji: wyśrodkowany, ikona nad tekstem, bez ramek */
.wyglad-jasna .features { background: #FFFFFF; border: 0; }
.wyglad-jasna .features__list { gap: 32px 16px; padding: 48px 0 24px; }
.wyglad-jasna .features__item { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.wyglad-jasna .features__icon { color: var(--c-ink); }
.wyglad-jasna .features__text { font-size: 14px; }
.wyglad-jasna .features__text b { font-weight: 600; }
@media (min-width: 1024px) {
	.wyglad-jasna .features__list { padding: 64px 0 32px; }
	.wyglad-jasna .features__text { font-size: 15px; }
}

/* Banery z panelu: duże zdjęcie w zaokrąglonej ramce, bez ramki */
.wyglad-jasna .promo { border: 0; border-radius: var(--radius-xl); background: var(--c-soft); }
.wyglad-jasna .promo__title { font-weight: 500; letter-spacing: -.02em; }
.wyglad-jasna .promo__text { color: var(--c-muted); }

/* Kafle kategorii 4:5 z podpisem i pigułką na zdjęciu */
.wyglad-jasna .j-kategorie .section__inner { padding-top: 40px; }
.wyglad-jasna .category-grid { gap: 16px; }
.wyglad-jasna .category-card { position: relative; gap: 0; overflow: hidden; border-radius: var(--radius-xl); color: #FFFFFF; }
.wyglad-jasna .category-card .photo { aspect-ratio: 4 / 5; border-radius: var(--radius-xl); }
.wyglad-jasna .category-card .photo img { transition: transform .6s ease; }
.wyglad-jasna .category-card:hover .photo img { transform: scale(1.03); }
.wyglad-jasna .category-card .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 12, .74) 0%, rgba(10, 10, 12, .45) 35%, rgba(10, 10, 12, 0) 62%); }
.wyglad-jasna .category-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; align-items: center; gap: 10px; max-width: none; padding: 28px 20px; text-align: center; }
.wyglad-jasna .category-card__title { font-size: 32px; color: #FFFFFF; }
.wyglad-jasna .category-card:hover .category-card__title { color: #FFFFFF; }
.wyglad-jasna .category-card__lead { max-width: 24rem; color: #FFFFFF; font-size: 15px; }
.wyglad-jasna .category-card .j-pigulka { margin-top: 8px; }
.wyglad-jasna .category-card:hover .j-pigulka { background: var(--c-soft); }
@media (min-width: 768px) {
	.wyglad-jasna .category-grid { gap: 24px; }
	.wyglad-jasna .category-card__body { padding: 40px; }
	.wyglad-jasna .category-card__title { font-size: 40px; }
}
@media (min-width: 1024px) {
	.wyglad-jasna .j-kategorie .section__inner { padding-top: 48px; }
	.wyglad-jasna .category-card .photo { aspect-ratio: 4 / 5; max-height: 720px; }
}

/* Nosidła: duże karty ze zdjęciem 4:5 na szarym tle, bez ramek */
.wyglad-jasna .section__head { align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.wyglad-jasna .section__head-text { align-items: center; }
.wyglad-jasna .product-cards--few { gap: 40px 24px; }
.wyglad-jasna .product-cards--few .product-card,
.wyglad-jasna .product-cards--few .product-card:hover { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.wyglad-jasna .product-card__image { aspect-ratio: 4 / 5; border-radius: var(--radius-xl); background: var(--c-soft); }
.wyglad-jasna .product-cards--few .product-card__image { aspect-ratio: 4 / 5; border-radius: var(--radius-xl); }
.wyglad-jasna .product-card__image img { padding: 6%; object-fit: contain; background: #FFFFFF; filter: brightness(.965) sepia(.05); transition: transform .6s ease; }
.wyglad-jasna .product-card:hover .product-card__image img { transform: scale(1.03); }
.wyglad-jasna .product-cards--few .product-card__body { gap: 8px; padding: 20px 4px 0; border-top: 0; text-align: center; align-items: center; }
.wyglad-jasna .product-card__title,
.wyglad-jasna .product-cards--few .product-card__title { font-family: var(--font-display); font-weight: 500 !important; letter-spacing: -.02em; }
.wyglad-jasna .product-cards--few .product-card__title { font-size: 28px; }
.wyglad-jasna .product-card:hover .product-card__title { color: var(--c-ink); }
.wyglad-jasna .product-cards--few .product-card__body > .muted { max-width: 30rem; }
.wyglad-jasna .product-cards--few .product-card__foot { flex-direction: column; justify-content: center; gap: 16px; padding-top: 4px; }
.wyglad-jasna .product-card__price { font-size: 16px; }

/* Jak to działa: wyśrodkowane, kroki z numerem w różowym kółku */
.wyglad-jasna .section--card { background: var(--c-soft); }
.wyglad-jasna .steps { grid-template-columns: minmax(0, 1fr); gap: 40px; text-align: center; }
.wyglad-jasna .steps__intro { align-items: center; }
.wyglad-jasna .steps__intro p { max-width: 30rem; }
.wyglad-jasna .steps__list { counter-reset: krok; gap: 40px; }
.wyglad-jasna .steps__item { align-items: center; counter-increment: krok; }
.wyglad-jasna .steps__item .icon-circle { width: 64px; height: 64px; background: #FFFFFF; color: var(--c-ink); }
.wyglad-jasna .steps__title { font-size: 22px; }
.wyglad-jasna .steps__title::before { content: counter(krok) ". "; }
.wyglad-jasna .steps__text { max-width: 22rem; }
@media (min-width: 1024px) {
	.wyglad-jasna .steps { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.wyglad-jasna .steps__list { gap: 48px; }
}

/* Sekcje pół na pół: zdjęcie do krawędzi ekranu, tekst wyśrodkowany obok, na przemian */
.wyglad-jasna .j-polowa { display: grid; grid-template-columns: minmax(0, 1fr); background: #FFFFFF; }
.wyglad-jasna .j-polowa__zdjecie { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-soft); }
.wyglad-jasna .j-polowa__zdjecie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wyglad-jasna .j-polowa__tekst { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 48px var(--gutter-r) 56px var(--gutter-l); text-align: center; }
.wyglad-jasna .j-polowa__tekst > * { max-width: 30rem; margin: 0; }
.wyglad-jasna .j-polowa__tekst .section__title { font-size: 32px; }
.wyglad-jasna .j-polowa__tekst .btn { margin-top: 8px; }
.wyglad-jasna .j-polowa__lista { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.wyglad-jasna .j-polowa__lista dt { font-weight: 600; }
.wyglad-jasna .j-polowa__lista dd { margin: 2px 0 0; font-size: 15px; }
@media (min-width: 900px) {
	.wyglad-jasna .j-polowa { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 600px; }
	.wyglad-jasna .j-polowa__zdjecie { aspect-ratio: auto; min-height: 100%; }
	.wyglad-jasna .j-polowa--odwrotnie .j-polowa__zdjecie { order: 2; }
	.wyglad-jasna .j-polowa__tekst { padding: 72px 56px; }
	.wyglad-jasna .j-polowa__tekst .section__title { font-size: 40px; }
	.wyglad-jasna .j-polowa--odwrotnie .j-polowa__tekst { background: var(--c-soft); }
}

/* Little Traveller: pudrowy róż, tekst wyśrodkowany */
.wyglad-jasna #little-traveller .section__inner { padding-bottom: 0; }
.wyglad-jasna .trust { justify-items: center; gap: 16px; padding: 40px 24px; border-radius: var(--radius-xl); background: var(--c-roz); text-align: center; }
.wyglad-jasna .trust__icon { background: #FFFFFF; color: var(--c-ink); }
.wyglad-jasna .trust__text { align-items: center; max-width: 40rem; }
.wyglad-jasna .trust__text .muted { color: #4A4542; }
.wyglad-jasna .trust__title { font-size: 30px; }
.wyglad-jasna .trust__actions { justify-content: center; }
.wyglad-jasna .trust__actions .btn--outline { border-color: var(--c-ink); background: transparent; }
.wyglad-jasna .trust__actions .btn--outline:hover { background: var(--c-ink); color: #FFFFFF; }
.wyglad-jasna .trust__actions .link-underline { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-ink); }
@media (min-width: 768px) {
	.wyglad-jasna .trust { grid-template-columns: minmax(0, 1fr); padding: 56px 48px; }
	.wyglad-jasna .trust__title { font-size: 38px; }
}

/* Pytania: wyśrodkowany nagłówek nad akordeonem z cienką linią */
.wyglad-jasna .faq { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.wyglad-jasna .faq__intro { align-items: center; text-align: center; }
.wyglad-jasna .faq__intro p { max-width: 32rem; }
.wyglad-jasna .faq__list { width: 100%; max-width: 820px; border-color: var(--c-ink-20); }
.wyglad-jasna .acc + .acc { border-top-color: var(--c-ink-20); }
.wyglad-jasna .acc__summary { min-height: 64px; font-weight: 500; font-size: 18px; }
.wyglad-jasna .acc__chev { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--c-soft); color: var(--c-ink); font-size: 20px; }
.wyglad-jasna .acc__body { font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
	.wyglad-jasna :is(.category-card, .product-card) img { transform: none !important; }
}