/**
 * assets/css/profile/post_gallery.css
 * 
 * DROPX PRIME SYSTEM - CSEMPERÁCS ÉS MÉDIA GALÉRIA MODUL (DRY)
 * 
 * Használja: Hírfolyam (home.php), Profil fal (tab_wall.php), Csoportok (group_view.php).
 * 
 * Funkciók:
 * - 1–5+ Képes Csemperács (.tiles-1 - .tiles-5-plus) finom elegáns kerettel
 * - Matematikailag pontos CSS Grid sorok (balra 2 sor, jobbra 3 sor - fix 420px)
 * - Átlátszó arany "+X db" fedőréteg (.tile-overlay-more)
 * - 16:9 arányú dinamikus YouTube videó beágyazó
 * 
 * SZABÁLYZAT: Szigorúan 0 db szabály.
 */

/* =========================================================================
   1. CSEMPERÁCS ALAPOK ÉS FINOM KÉPKERET
   ========================================================================= */
.post-tile-gallery {
    margin: 10px 0;
    border-radius: 8px;
    overflow: hidden;
    background: #0d0f14;
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    box-sizing: border-box;
}

.post-tile-grid {
    width: 100%;
    box-sizing: border-box;
}

.tile-item {
    position: relative;
    overflow: hidden;
    background: #11141c;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    transition: border-color 0.2s ease;
}

.tile-item:hover {
    border-color: var(--color-border-gold, rgba(229, 158, 0, 0.45));
}

.parsed-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.tile-item:hover .parsed-post-image {
    transform: scale(1.03);
}

/* =========================================================================
   2. 1, 2, 3 ÉS 4 KÉPES ELRENDEZÉSEK
   ========================================================================= */
/* 1 KÉP */
.post-tile-grid.tiles-1 {
    display: block;
    max-height: 520px;
}

.post-tile-grid.tiles-1 .parsed-post-image {
    max-height: 520px;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: #0a0c10;
}

/* 2 KÉP */
.post-tile-grid.tiles-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    height: 320px;
}

/* 3 KÉP */
.post-tile-grid.tiles-3 {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4px;
    height: 380px;
}

.post-tile-grid.tiles-3 .tile-left-main {
    height: 100%;
    min-height: 0;
}

.post-tile-grid.tiles-3 .tile-group-right {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    height: 100%;
    min-height: 0;
}

/* 4 KÉP */
.post-tile-grid.tiles-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    height: 380px;
}

/* =========================================================================
   3. 5 ÉS 5+ KÉPES CSEMPERÁCS (100% BEILLESZKEDŐ CSS GRID)
   ========================================================================= */
.post-tile-grid.tiles-5,
.post-tile-grid.tiles-5-plus {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4px;
    height: 420px;
    max-height: 420px;
    width: 100%;
    box-sizing: border-box;
}

/* Bal oszlop: 2 egyenlő sor (50% - 50%) */
.tile-col-left {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    height: 420px;
    max-height: 420px;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* Jobb oszlop: 3 egyenlő sor (33.3% - 33.3% - 33.3%) */
.tile-col-right {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 4px;
    height: 420px;
    max-height: 420px;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.tile-item-relative {
    position: relative;
}

/* "+X db" félátlátszó arany fedőréteg */
.tile-overlay-more {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 15, 0.82);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-gold, #e59e00);
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    border: 1px solid rgba(229, 158, 0, 0.4);
    z-index: 5;
    border-radius: 4px;
}

.tile-item:hover .tile-overlay-more {
    background: rgba(8, 10, 15, 0.65);
    transform: scale(1.02);
}

/* =========================================================================
   4. YOUTUBE BEÁGYAZÓ
   ========================================================================= */
.parsed-youtube-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    margin: 12px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #000000;
}

.parsed-youtube-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}