/* Porta Light – Tour Grid  |  CSS v6.0 */

.plt-browser *, .plt-browser *::before, .plt-browser *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}

/* ── Toggle ──────────────────────────────────────────────────── */
.plt-toggle-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 8px 14px 6px;
}
.plt-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border: 1.5px solid rgba(255,255,255,.22);
    border-radius: 20px;
    background: rgba(255,255,255,.06);
    color: #ccc;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    font-family: inherit;
    white-space: nowrap;
}
.plt-toggle-btn:hover {
    background: rgba(255,255,255,.13);
    color: #fff;
    border-color: rgba(255,255,255,.38);
}

/* ── Tabs ────────────────────────────────────────────────────── */
.plt-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 10px 14px;
    background: rgba(255,255,255,.07);
}
.plt-tab {
    padding: 8px 20px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 3px;
    transition: background .15s, color .15s;
    white-space: nowrap;
    font-family: inherit;
}
.plt-tab:hover:not(.active) { background: rgba(255,255,255,.1); }
.plt-tab.active             { background: #2196f3; color: #fff; }

/* ── Grid ────────────────────────────────────────────────────── */
.plt-grid { display: grid; gap: 4px; width: 100%; }
.plt-cols-2 { grid-template-columns: repeat(2, 1fr); }
.plt-cols-3 { grid-template-columns: repeat(3, 1fr); }
.plt-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Card ────────────────────────────────────────────────────── */
.plt-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #0d1221;
}
.plt-card::before {
    content: '';
    display: block;
    padding-bottom: var(--plt-aspect, 66.66%);
}
.plt-card-bg,
.plt-card-iframe-slot,
.plt-card-overlay,
.plt-card-body,
.plt-play {
    position: absolute;
    inset: 0;
}

/* ── Image background ────────────────────────────────────────── */
.plt-card-bg {
    background: #0d1221 center / cover no-repeat;
    transition: transform .45s cubic-bezier(.25,.46,.45,.94);
    z-index: 0;
}
.plt-mode-image .plt-card:hover .plt-card-bg { transform: scale(1.06); }

/* ── Iframe slot ─────────────────────────────────────────────── */
/* In image mode: hidden. In iframe mode: shown on hover via JS */
.plt-card-iframe-slot {
    z-index: 1;
    overflow: hidden;
    pointer-events: none; /* card div handles all clicks */
}
.plt-card-iframe-slot iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    pointer-events: none;
    background: #0d1221;
}

/* Hide slot in image mode, show in iframe mode */
.plt-mode-image  .plt-card-iframe-slot { display: none; }
.plt-mode-iframe .plt-card-iframe-slot { display: block; }

/* ── Overlay ─────────────────────────────────────────────────── */
.plt-card-overlay {
    z-index: 2;
    opacity: 0;
    transition: opacity .22s;
}
.plt-card.overlay-always .plt-card-overlay,
.plt-card:hover           .plt-card-overlay { opacity: 1; }

/* ── Card text body ──────────────────────────────────────────── */
.plt-card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px 14px 12px;
    z-index: 3;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.30) 45%, transparent 100%);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .22s, transform .22s;
}
.plt-card.overlay-always .plt-card-body,
.plt-card:hover           .plt-card-body { opacity: 1; transform: translateY(0); }

.plt-card-cat  { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: rgba(255,255,255,.65); margin-bottom: 3px; text-transform: uppercase; }
.plt-card-name { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.25; margin-bottom: 3px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.plt-card-desc { font-size: 12px; color: rgba(255,255,255,.8); line-height: 1.4; }

/* ── Play icon ───────────────────────────────────────────────── */
.plt-play {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    opacity: 0;
    transform: scale(.78);
    transition: opacity .2s, transform .2s;
    pointer-events: none;
}
.plt-card:hover .plt-play { opacity: 1; transform: scale(1); }

/* In iframe mode: hide play icon (card shows live tour) */
.plt-mode-iframe .plt-play { display: none; }

/* ── Visibility ──────────────────────────────────────────────── */
.plt-card.plt-hidden { display: none; }
.plt-card.plt-show   { animation: pltShow .28s ease forwards; }
@keyframes pltShow { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:scale(1); } }

/* ── Empty state ─────────────────────────────────────────────── */
.plt-empty-state { grid-column:1/-1; padding:60px 20px; text-align:center; color:#666; font-size:14px; line-height:1.8; }
.plt-empty-state strong { color:#999; }

/* ── Modal ───────────────────────────────────────────────────── */
.plt-modal { display:none; position:fixed; inset:0; z-index:999999; align-items:center; justify-content:center; }
.plt-modal.open { display:flex; }
.plt-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.88); backdrop-filter:blur(5px); animation:pltBD .2s ease; }
@keyframes pltBD { from{opacity:0} to{opacity:1} }

.plt-modal-box {
    position:relative; z-index:1; width:94vw; max-width:1400px;
    background:#111; border-radius:8px; overflow:hidden;
    display:flex; flex-direction:column;
    box-shadow:0 32px 100px rgba(0,0,0,.75);
    animation:pltBox .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pltBox { from{opacity:0;transform:scale(.93) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }

.plt-modal-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 16px; background:#1b1b1b; border-bottom:1px solid #2a2a2a; min-height:48px; flex-shrink:0; }
.plt-modal-title  { display:flex; align-items:center; gap:8px; overflow:hidden; font-size:13px; }
.plt-modal-cat    { font-weight:700; color:#2196f3; white-space:nowrap; flex-shrink:0; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.plt-modal-sep    { color:#444; flex-shrink:0; }
.plt-modal-name   { font-weight:600; color:#e8e8e8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plt-modal-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.plt-modal-ext { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:4px; background:rgba(255,255,255,.06); color:#aaa; text-decoration:none; font-size:12px; font-weight:500; transition:background .15s,color .15s; white-space:nowrap; }
.plt-modal-ext:hover { background:rgba(255,255,255,.12); color:#fff; }
.plt-modal-close { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border:none; border-radius:6px; background:transparent; color:#888; font-size:22px; cursor:pointer; transition:background .15s,color .15s; font-family:inherit; line-height:1; }
.plt-modal-close:hover { background:rgba(255,255,255,.08); color:#fff; }

.plt-modal-body { position:relative; flex:1; }
.plt-modal-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:#111; color:#666; font-size:13px; z-index:2; transition:opacity .2s; }
.plt-modal-loading.hidden { opacity:0; pointer-events:none; }
.plt-spinner { width:34px; height:34px; border:3px solid #222; border-top-color:#2196f3; border-radius:50%; animation:pltSpin .7s linear infinite; }
@keyframes pltSpin { to{transform:rotate(360deg)} }
.plt-modal-iframe { display:block; width:100%; border:none; background:#fff; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:960px) {
    .plt-cols-4,.plt-cols-3 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
    .plt-cols-4,.plt-cols-3,.plt-cols-2 { grid-template-columns:1fr; }
    .plt-tabs { padding:8px 10px; }
    .plt-tab  { font-size:11px; padding:6px 12px; }
    .plt-modal-box { width:100vw; border-radius:0; }
}