/* ==========================================================================
   1x1 MEDIA. Referenciák aloldal (redesign portolás, page-specifikus).
   A redesign.css UTÁN tölt (referenciak.php link-sorrend), kizárólag azt
   egészíti ki, amit a közös rendszer nem fed le. A közös redesign.css /
   style.css tokenjeire épül, nem definiál új színt/betűméretet a meglévő
   --clr-* / --d-* / --sp / --radius-* / --ease* változókon kívül.
   ========================================================================== */

/* ---------- HERO (egy oszlopos, középre rendezett variáns, strategia.css mintája) ---------- */
.rd-hero-solo { padding: clamp(56px, 9vw, 104px) 0 var(--sp); text-align: center; }
.rd-hero-solo > .rd-wrap > div { max-width: 760px; margin: 0 auto; }
.rd-hero-solo h1 { font-size: clamp(32px, 5.2vw, 54px); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; text-wrap: balance; }
.rd-hero-solo h1 .hl { color: var(--clr-accent-deep); }
.rd-hero-solo .rd-lede { margin: 22px auto 0; font-size: clamp(17px, 1.7vw, 20px); }

/* ---------- SÖTÉT: KIEMELT ESETEK (flagship-mintájú kártyarács) ---------- */
.rf-featured { background: var(--d-bg); color: var(--d-ink); padding: var(--sp) 0; }
.rf-featured .rd-eyebrow { color: var(--d-accent); }
.rf-featured .rd-lede { color: var(--d-muted); }
.rf-story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 48px; }
.rf-story { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.rf-story__media { aspect-ratio: 16 / 10; background: var(--d-line); overflow: hidden; }
.rf-story__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rf-story__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--d-muted); font-size: 38px; }
.rf-story__body { padding: 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.rf-story__cat { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--d-accent); }
.rf-story__title { font-size: 19px; font-weight: 700; line-height: 1.25; }
.rf-story__desc { font-size: 14.5px; color: var(--d-muted); line-height: 1.6; }
.rf-story__quote { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--d-line); }
.rf-story__quote p { font-size: 14px; font-style: italic; color: var(--d-ink); opacity: .92; }
.rf-story__quote strong { display: block; margin-top: 8px; font-size: 12.5px; color: var(--d-muted); font-weight: 600; font-style: normal; }

/* ---------- ÜRES ÁLLAPOTOK (kiemelt + portfólió) ---------- */
.rf-empty { grid-column: 1 / -1; text-align: center; padding: 48px 24px; border-radius: var(--radius-lg); border: 1px dashed var(--clr-border); }
.rf-empty i { font-size: 38px; margin-bottom: 14px; display: block; }
.rf-empty p { font-size: 14.5px; }
.rf-empty--dark { border-color: var(--d-line); color: var(--d-muted); margin-top: 48px; }
.rf-empty--dark i { color: var(--d-accent); opacity: .6; }
.rf-empty--light { background: var(--clr-surface); color: var(--clr-text-muted); }
.rf-empty--light i { color: var(--clr-accent); opacity: .5; }

/* ---------- PORTFÓLIÓ (világos szekció, pcard-nyelvű képrács) ---------- */
.rf-portfolio { padding: var(--sp) 0; background: var(--clr-surface); border-top: 1px solid var(--clr-border); border-bottom: 1px solid var(--clr-border); }
.rf-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin: 40px 0 36px; }
.rf-filter-btn { background: var(--clr-chip); border: 1px solid transparent; border-radius: 999px; padding: 10px 20px; font-size: 13.5px; font-weight: 600; color: var(--clr-text-muted); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.rf-filter-btn:hover { color: var(--clr-text); }
.rf-filter-btn.active { background: var(--clr-accent-soft); border-color: var(--clr-accent-soft-border); color: var(--clr-accent-deep); }

.rf-masonry { columns: 3; column-gap: 20px; }
@media (max-width: 900px) { .rf-masonry { columns: 2; } }
@media (max-width: 560px) { .rf-masonry { columns: 1; } }
.rf-mitem { break-inside: avoid; margin-bottom: 20px; border-radius: var(--radius-lg); overflow: hidden; position: relative; cursor: pointer; background: var(--clr-bg); border: 1px solid var(--clr-border); box-shadow: var(--rd-shadow); transition: transform .2s var(--ease-out-strong), box-shadow .2s ease; }
@media (hover: hover) and (pointer: fine) { .rf-mitem:hover { transform: translateY(-4px); box-shadow: var(--rd-shadow-lg); } }
.rf-mitem img { width: 100%; display: block; }
.rf-mitem__placeholder { padding-bottom: 72%; position: relative; background: var(--clr-accent-soft); }
.rf-mitem__placeholder i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--clr-accent-deep); opacity: .5; }
.rf-mitem__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 20, 16, .82) 0%, transparent 55%); opacity: 0; transition: opacity .25s ease; display: flex; align-items: flex-end; padding: 18px; }
@media (hover: hover) and (pointer: fine) { .rf-mitem:hover .rf-mitem__overlay { opacity: 1; } }
@media (hover: none) { .rf-mitem__overlay { opacity: 1; background: linear-gradient(to top, rgba(11, 20, 16, .72) 0%, transparent 65%); } }
.rf-mitem__info .cat { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8FE0B8; margin-bottom: 4px; }
.rf-mitem__info .title { font-size: 13.5px; font-weight: 700; color: #fff; line-height: 1.3; }

/* ---------- KÖVESS MINKET (világos, központosított kártya) ---------- */
.rf-social { padding: var(--sp) 0; }
.rf-social-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.rf-social-inner .rd-lede { margin: 16px auto 0; }
.rf-social-icons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.rf-social-icon { display: inline-flex; align-items: center; gap: 8px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 600; color: var(--clr-text); transition: border-color .2s ease, color .2s ease, transform .2s var(--ease-out-strong); }
.rf-social-icon:hover { border-color: var(--clr-accent); color: var(--clr-accent-deep); transform: translateY(-2px); }
.rf-social-icon.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
    .rf-mitem, .rf-mitem__overlay, .rf-social-icon { transition: none !important; }
}