/* Listaoldal-landing (kategória, népszerű, újdonságok, akciók). Adat: PrestaHU\Catalog\Landing.
   Csak tokenek: themes/prestahu-default/assets/css/custom.css :root (--ph-*). Mobile-first.
   A hero a wrapperen belüli lekerekített panel, ugyanabban a szélességben, mint a terméklista. */

.ph-landing-hero { padding: var(--ph-space-4) 0 var(--ph-space-5); }
.ph-landing-hero__panel {
    display: grid;
    gap: var(--ph-space-5);
    padding: var(--ph-space-5) var(--ph-space-4);
    border-radius: var(--ph-radius-md);
    background: var(--ph-surface-cream);
}
/* listánként saját felület-tónus, a meglévő felület-tokenekből */
.ph-landing-hero--free .ph-landing-hero__panel { background: var(--ph-surface-mint); }
.ph-landing-hero--sale .ph-landing-hero__panel { background: var(--ph-surface-peach); }
.ph-landing-hero--new .ph-landing-hero__panel { background: var(--ph-surface-sand); }

.ph-landing-hero__copy { min-width: 0; align-self: center; }
/* felső címke: vonal + kiskapitális, mint a szakasz-címkék */
.ph-landing-hero__eyebrow, .ph-landing-guide__eyebrow {
    display: flex; align-items: center; gap: var(--ph-space-3);
    margin: 0 0 var(--ph-space-3);
    font-size: var(--ph-text-xs); font-weight: 700; line-height: 1.4;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--ph-brand-strong);
}
.ph-landing-hero__eyebrow::before, .ph-landing-guide__eyebrow::before {
    content: ""; flex: none; width: 28px; height: 2px; border-radius: 2px; background: var(--ph-brand);
}

html body .ph-landing-hero__title {
    margin: 0 0 var(--ph-space-4);
    font-family: var(--ph-font-display);
    font-size: var(--ph-text-2xl); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em;
    text-transform: none;
    color: var(--ph-ink);
    text-wrap: balance;
}
/* a két rész közti elválasztó a keresőnek szól, vizuálisan új sor választ el */
.ph-landing-hero__sep {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.ph-landing-hero__accent {
    display: block; margin-top: var(--ph-space-2);
    font-size: 0.62em; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em;
    color: var(--ph-brand-strong);
}
.ph-landing-hero__lead {
    max-width: 60ch; margin: 0 0 var(--ph-space-4);
    font-size: var(--ph-text-md); line-height: 1.6; color: var(--ph-ink);
}
.ph-landing-hero__stat {
    display: inline-flex; flex-direction: column; margin: 0 0 var(--ph-space-4);
}
.ph-landing-hero__stat strong {
    font-family: var(--ph-font-display); font-size: var(--ph-text-2xl); font-weight: 800; line-height: 1;
    color: var(--ph-brand-strong); font-variant-numeric: tabular-nums;
}
.ph-landing-hero__stat span {
    margin-top: var(--ph-space-1);
    font-size: var(--ph-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ph-ink);
}
.ph-landing-hero__facts {
    display: grid; gap: var(--ph-space-2);
    margin: 0 0 var(--ph-space-5); padding: 0; list-style: none;
}
.ph-landing-hero__facts li { display: flex; align-items: flex-start; gap: var(--ph-space-3); color: var(--ph-ink); line-height: 1.5; }
.ph-landing-hero__facts iconify-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-top: 0.05em; border-radius: var(--ph-radius-pill);
    background: var(--ph-brand); color: var(--ph-brand-ink); font-size: 14px;
}
.ph-landing-hero__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ph-space-2);
    min-height: 48px; padding: 0 var(--ph-space-6);
    border-radius: var(--ph-radius-pill); background: var(--ph-brand); color: var(--ph-brand-ink);
    font-size: var(--ph-text-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
    box-shadow: var(--ph-shadow-brand); touch-action: manipulation;
    transition: background-color var(--ph-dur-fast) var(--ph-ease-out), transform var(--ph-dur-fast) var(--ph-ease-out);
}
.ph-landing-hero__cta:hover, .ph-landing-hero__cta:focus-visible { background: var(--ph-brand-strong); color: var(--ph-brand-ink); text-decoration: none; }
.ph-landing-hero__cta:active { transform: scale(0.98); }
.ph-landing-hero__cta:focus-visible { outline: 2px solid var(--ph-brand-strong); outline-offset: 3px; }

/* a lista első négy moduljának képe: mobilon egy sor, asztalin eltolt 2×2 kollázs */
.ph-landing-hero__media {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ph-space-2);
    margin: 0; padding: 0; list-style: none;
}
.ph-landing-hero__media li { min-width: 0; }
.ph-landing-hero__media a {
    display: block; overflow: hidden;
    border-radius: var(--ph-radius-sm); background: var(--ph-bg); box-shadow: var(--ph-shadow-sm);
    transition: transform var(--ph-dur) var(--ph-ease-out), box-shadow var(--ph-dur) var(--ph-ease-out);
}
.ph-landing-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.ph-landing-hero__media--1 { grid-template-columns: minmax(0, 200px); justify-content: center; }
.ph-landing-hero__media a:hover { transform: translateY(-4px); box-shadow: var(--ph-shadow-md); }

/* témakör-chipek a hero alatt: mobilon vízszintesen görgethető sor */
.ph-landing-topics { padding: 0 0 var(--ph-space-5); }
html body .ph-landing-topics__title {
    margin: 0 0 var(--ph-space-3);
    font-family: var(--ph-font-display); font-size: var(--ph-text-lg); font-weight: 700; line-height: 1.2;
    text-transform: none; color: var(--ph-ink);
}
.ph-landing-topics__chips {
    display: flex; gap: var(--ph-space-2);
    margin: 0 calc(-1 * var(--ph-space-4)); padding: var(--ph-space-1) var(--ph-space-4);
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.ph-landing-topics__chips::-webkit-scrollbar { display: none; }
.ph-landing-chip {
    display: inline-flex; align-items: center; gap: var(--ph-space-2);
    min-height: 44px; padding: 0 var(--ph-space-4);
    border: var(--ph-border-w) solid var(--ph-border-strong); border-radius: var(--ph-radius-pill);
    background: var(--ph-bg); color: var(--ph-ink);
    font-size: var(--ph-text-sm); font-weight: 600; white-space: nowrap; text-decoration: none;
    touch-action: manipulation;
    transition: border-color var(--ph-dur-fast) var(--ph-ease-out), color var(--ph-dur-fast) var(--ph-ease-out);
}
.ph-landing-chip:hover, .ph-landing-chip:focus-visible { border-color: var(--ph-brand); color: var(--ph-brand-strong); text-decoration: none; }
.ph-landing-chip:focus-visible { outline: 2px solid var(--ph-brand); outline-offset: 2px; }

/* nem landing-kategória (pl. tárhely) címe */
.ph-landing-plain-title {
    margin: var(--ph-space-4) 0;
    font-family: var(--ph-font-display); font-size: var(--ph-text-2xl); font-weight: 800; line-height: 1.1;
    color: var(--ph-ink);
}

/* lista alatti szakaszok: útmutató, GYIK, további listák */
.ph-landing-guide, .ph-landing-faq, .ph-landing-related { padding-top: var(--ph-section-sm); }
html body .ph-landing-guide h2, html body .ph-landing-faq h2, html body .ph-landing-related h2 {
    margin: 0 0 var(--ph-space-4);
    font-family: var(--ph-font-display); font-size: var(--ph-text-xl); font-weight: 700; line-height: 1.2;
    text-transform: none; color: var(--ph-ink);
}
.ph-landing-guide { display: grid; gap: var(--ph-space-5); align-items: center; }
.ph-landing-guide__media {
    margin: 0; overflow: hidden;
    border-radius: var(--ph-radius-md); background: var(--ph-bg); box-shadow: var(--ph-shadow-lg);
}
.ph-landing-guide__media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.ph-landing-guide__body { min-width: 0; }
.ph-landing-guide__body p { max-width: 68ch; margin: 0 0 var(--ph-space-3); font-size: var(--ph-text-base); line-height: 1.7; color: var(--ph-ink-muted); }
.ph-landing-guide__body p strong { font-weight: 700; color: var(--ph-ink); }

.ph-landing-faq { max-width: 860px; margin: 0 auto; }
html body .ph-landing-faq h2 { text-align: center; }
.ph-landing-faq__item {
    margin-bottom: var(--ph-space-3);
    border: var(--ph-border-w) solid var(--ph-border); border-radius: var(--ph-radius-md);
    background: var(--ph-bg); box-shadow: var(--ph-shadow-sm);
    transition: box-shadow var(--ph-dur) var(--ph-ease-out), border-color var(--ph-dur) var(--ph-ease-out);
}
.ph-landing-faq__item[open] { border-color: var(--ph-border-strong); box-shadow: var(--ph-shadow-md); }
.ph-landing-faq__item summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ph-space-3);
    min-height: 56px; padding: var(--ph-space-3) var(--ph-space-4);
    font-size: var(--ph-text-md); font-weight: 600; line-height: 1.4; color: var(--ph-ink);
    list-style: none; cursor: pointer;
}
.ph-landing-faq__item summary::-webkit-details-marker { display: none; }
.ph-landing-faq__item summary iconify-icon { flex: none; color: var(--ph-ink-muted); transition: transform var(--ph-dur) var(--ph-ease-out); }
.ph-landing-faq__item[open] summary iconify-icon { transform: rotate(45deg); }
.ph-landing-faq__item summary:focus-visible { outline: 2px solid var(--ph-brand); outline-offset: 2px; border-radius: var(--ph-radius-md); }
.ph-landing-faq__item p { max-width: 72ch; margin: 0; padding: 0 var(--ph-space-4) var(--ph-space-4); line-height: 1.7; color: var(--ph-ink-muted); }

.ph-landing-related { padding-bottom: var(--ph-space-6); }
.ph-landing-related ul {
    display: grid; gap: var(--ph-space-2); grid-template-columns: 1fr;
    margin: 0; padding: 0; list-style: none;
}
.ph-landing-related a {
    display: flex; align-items: center; gap: var(--ph-space-3);
    min-height: 52px; padding: var(--ph-space-2) var(--ph-space-4);
    border: var(--ph-border-w) solid var(--ph-border); border-radius: var(--ph-radius-sm);
    background: var(--ph-bg); color: var(--ph-ink); font-weight: 600; text-decoration: none;
    transition: border-color var(--ph-dur-fast) var(--ph-ease-out), color var(--ph-dur-fast) var(--ph-ease-out);
}
.ph-landing-related a iconify-icon { flex: none; color: var(--ph-brand-strong); }
.ph-landing-related a:hover, .ph-landing-related a:focus-visible { border-color: var(--ph-brand); color: var(--ph-brand-strong); text-decoration: none; }
.ph-landing-related a:focus-visible { outline: 2px solid var(--ph-brand); outline-offset: 2px; }

/* üres lista (pl. épp nincs akció) */
.ph-landing-empty {
    display: flex; align-items: center; gap: var(--ph-space-3);
    padding: var(--ph-space-5) var(--ph-space-4);
    border: var(--ph-border-w) dashed var(--ph-border-strong); border-radius: var(--ph-radius-md);
    color: var(--ph-ink-muted);
}
.ph-landing-empty iconify-icon { flex: none; font-size: var(--ph-text-xl); color: var(--ph-ink-subtle); }
.ph-landing-empty p { margin: 0; line-height: 1.6; }

@media (min-width: 576px) {
    .ph-landing-related ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .ph-landing-hero__panel { padding: var(--ph-space-6); border-radius: var(--ph-radius-lg); }
    html body .ph-landing-hero__title { font-size: var(--ph-text-3xl); }
    .ph-landing-hero__media { gap: var(--ph-space-3); }
    .ph-landing-topics__chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
    .ph-landing-guide--media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--ph-space-7); }
}
@media (min-width: 992px) {
    .ph-landing-hero__panel { padding: var(--ph-space-7); }
    .ph-landing-hero--media .ph-landing-hero__panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--ph-space-7); align-items: center; }
    .ph-landing-hero--media .ph-landing-hero__media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ph-space-4); padding-bottom: var(--ph-space-6); }
    /* eltolt kollázs: a második oszlop lejjebb indul */
    .ph-landing-hero--media .ph-landing-hero__media li:nth-child(even) { transform: translateY(var(--ph-space-6)); }
    .ph-landing-hero__media a { border-radius: var(--ph-radius-md); box-shadow: var(--ph-shadow-md); }
    .ph-landing-hero--media .ph-landing-hero__media--1 { grid-template-columns: minmax(0, 400px); padding-bottom: 0; }
    .ph-landing-related ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .ph-landing-chip, .ph-landing-related a, .ph-landing-faq__item, .ph-landing-faq__item summary iconify-icon,
    .ph-landing-hero__cta, .ph-landing-hero__media a { transition: none; }
}