/* neokabinet/assets/css/style.css */
/* CSAK A TARTALMI RÉSZ – a fejléc / lábléc / háttér a layout.css-ben van */

/* RESET */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

a {
    color: #5b2c16;
    text-decoration: underline;
}

a:hover,
a:focus {
    text-decoration: none;
}

button,
.btn {
    font-family: inherit;
    cursor: pointer;
    border: none;
}

.page {
    padding: 40px 0;
}

figure {
    margin: 0;
}

/* KÁRTYÁK */
.card,
.cabinet-card {
    background: #fffaf0;
    border: 1px solid #c8b79a;
    padding: 24px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.cabinet-card-large {
    padding: 28px;
}

.text-center { text-align:center; }
.mt-0 { margin-top:0; }
.mb-0 { margin-bottom:0; }
.mb-1 { margin-bottom:8px; }
.mb-2 { margin-bottom:16px; }
.mb-3 { margin-bottom:24px; }

h1,h2,h3,h4 {
    font-family: "Georgia","Times New Roman",serif;
    margin-top:0;
    color:#2c160b;
}

h1 { font-size:30px; margin-bottom:16px; }
h2 { font-size:24px; margin-bottom:12px; }
h3 { font-size:20px; margin-bottom:8px; }

/* ---------- FŐOLDAL HERO ---------- */

.home-hero {
    margin-top:32px;
}

.home-hero-inner {
    display:flex;
    align-items:flex-start;
    gap:32px;
    flex-wrap:wrap;
}

.home-hero-text { flex:1 1 320px; }

.home-eyebrow {
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:12px;
    margin:0 0 8px 0;
}

.home-lead {
    font-size:16px;
    line-height:1.6;
    margin:0 0 12px 0;
}

.home-hero-image {
    flex:0 0 280px;
    max-width:320px;
}

.home-hero-frame {
    position:relative;
    padding:14px;
    background:#fdf4e3;
    border:1px solid #c8b79a;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.9),
        0 8px 18px rgba(0,0,0,0.25);
}

.home-hero-frame::before,
.home-hero-frame::after {
    content:"";
    position:absolute;
    inset:10px;
    border:1px solid rgba(190,162,120,0.8);
    pointer-events:none;
}

.home-hero-frame img {
    width:100%;
    height:auto;
    display:block;
}

.home-hero-caption {
    font-size:13px;
    margin-top:8px;
    opacity:.9;
}

.home-hero-actions {
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-top:18px;
}

.btn {
    display:inline-block;
    padding:10px 22px;
    border-radius:999px;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.btn-primary {
    background:linear-gradient(#8b5a2b,#6b421b);
    color:#fdf3e4;
    border:1px solid #8b6a46;
    box-shadow:0 3px 8px rgba(0,0,0,0.35);
}

.btn-primary:hover { filter:brightness(1.08); }

.btn-secondary {
    background:#f4e3c8;
    color:#4b2c1a;
    border:1px solid #8b6a46;
    box-shadow:0 3px 8px rgba(0,0,0,0.18);
}

.btn-secondary:hover { background:#e4c79e; }

/* ---------- FŐOLDAL – KÉPES KÁRTYÁK ---------- */

.home-gallery-preview { margin-top:48px; }

.home-gallery-preview h2 {
    text-align:center;
}

.home-gallery-text {
    max-width:640px;
    margin:0 auto 24px auto;
    text-align:center;
}

.home-gallery-row {
    display:flex;
    justify-content:center;
    gap:32px;
    margin-top:32px;
}

.home-gallery-card {
    width:280px;
    text-align:center;
    display:flex;
    flex-direction:column;
}

.home-gallery-image-frame {
    width:100%;
    aspect-ratio:3 / 4;
    overflow:hidden;
    border:1px solid #d2c0a8;
    padding:8px;
    background:#faf3e8;
}

.home-gallery-image-frame img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.home-gallery-card figcaption {
    margin-top:16px;
    font-size:15px;
    line-height:1.45;
    color:#3b2616;
}

/* ---------- 3 SZÖVEGES KÁRTYA ---------- */

.home-text-grid {
    margin-top:48px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.home-text-grid > .cabinet-card {
    display:flex;
    flex-direction:column;
}

/* ---------- GALÉRIA ---------- */

.page-gallery {
    padding-top:48px;
    padding-bottom:64px;
}

.gallery-header {
    max-width:640px;
    margin:0 auto 24px auto;
    text-align:center;
}

.gallery-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.gallery-item { padding:16px; display:flex; flex-direction:column; }

.gallery-thumb {
    position:relative;
    width:100%;
    padding-top:133%;
    overflow:hidden;
    background:#fdf4e3;
    border:1px solid #c8b79a;
}

.gallery-thumb img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.gallery-pagination {
    margin-top:24px;
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
}

.gallery-page-link {
    padding:6px 10px;
    border-radius:999px;
    border:1px solid #c8b79a;
    background:rgba(253,244,227,0.9);
    font-size:14px;
}

.gallery-page-link.current {
    background:#8b5a2b;
    color:#fdf3e4;
}

/* ---------- LIGHTBOX – MOBILON NAGYOBB, PC-N KISEBB ---------- */

.gallery-lightbox {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.78);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:200;
    padding:20px;
    overflow-y:auto;          /* ha valamiért mégis magas, lehessen görgetni */
}

.gallery-lightbox.open { display:flex; }

/* ALAP: mobil / tablet – legyen nagyobb (80% a nézetből) */
.gallery-lightbox-inner {
    max-width:80vw;
    max-height:80vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.gallery-lightbox-inner img {
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    background:#fdf4e3;
    border:1px solid #c8b79a;
    padding:10px;
    display:block;
    box-shadow:0 10px 30px rgba(0,0,0,0.6);
}

.gallery-lightbox-close {
    position:absolute;
    top:-12px;
    right:-12px;
    width:32px;
    height:32px;
    border-radius:50%;
    background:#8b5a2b;
    color:#fdf3e4;
    font-size:22px;
    cursor:pointer;
}

/* NAGY KIJELZŐ (PC) – itt vesszük le 30%-ra a szélességet */
@media (min-width: 1024px) {
    .gallery-lightbox-inner {
        max-width:30vw;    /* kb. 30% szélesség a monitoron */
        max-height:80vh;   /* magasság maradhat 80% */
    }
}

/* ---------- BLOG ---------- */

.page-blog { padding:48px 0 64px; }

.blog-list {
    display:flex;
    flex-direction:column;
    gap:24px;
}

.blog-card img {
    max-width:100%;
    margin-bottom:12px;
    display:block;
}

.blog-card-title { font-size:20px; margin:0 0 4px 0; }
.blog-card-title a { text-decoration:none; color:inherit; }

.blog-meta { font-size:13px; opacity:.8; margin-bottom:12px; }

.blog-excerpt { line-height:1.6; margin-bottom:12px; }

/* ---------- MOBIL ---------- */

@media (max-width: 768px) {

    .home-gallery-row {
        flex-direction:column;
        align-items:center;
    }

    .home-gallery-card {
        width:90%;
        max-width:360px;
    }

    .home-text-grid {
        grid-template-columns:1fr;
    }
}

@media (max-width: 640px) {

    .gallery-grid {
        grid-template-columns:1fr;
    }

    .cabinet-card,
    .cabinet-card-large {
        padding:20px 18px;
    }
}