/**
 * States of Mind — פריסה וקו חזרה כמו דפי תערוכה (exhibition-page.css):
 * מותג ORA RUVEN קבוע שמאל־עליון, מתחתיו בזרימה קישור .back-link (לא site-back).
 * טעינה: exhibition-page.css ואז קובץ זה.
 */

body.page-words-gate .som-gate-content.content-container,
body.page-words .content.content-container.som-words-hub {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: max(5.5rem, calc(env(safe-area-inset-top, 0px) + 5.25rem)) 16px 40px;
}

body.page-words-gate.page-gate--passion .som-gate-content.content-container {
    max-width: 920px;
}

body.page-words-gate .som-gate-content > a.back-link:first-of-type,
body.page-words .content > a.back-link:first-of-type {
    align-self: flex-end;
    margin: 0 0 18px;
}

@media (max-width: 700px) {
    body.page-words-gate .som-gate-content.content-container,
    body.page-words .content.content-container.som-words-hub {
        padding-top: max(4.5rem, calc(env(safe-area-inset-top, 0px) + 4rem));
        padding-inline: clamp(16px, 4vw, 24px);
    }
}

/* כרטיסיות שער — כמו words-gate1 (עברית למעלה, אנגלית מתחת, תקציר, שורת שפה) */
/* התשוקה הגלויה (gate2) — רשת וכרטיסים משלימים ב־words-gate2.html */
/* אני הסטוריה (gate4) — 4 כרטיסיות ב־2×2 */
body.page-words-gate.page-gate--history .articles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 920px;
    margin-inline: auto;
}

body.page-words-gate:not(.page-gate--passion):not(.page-gate--history) .articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
}

body.page-words-gate:not(.page-gate--passion) .article-card {
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 18px;
    text-align: right;
    cursor: pointer;
    transition: 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    min-height: 180px;
}

body.page-words-gate:not(.page-gate--passion) .article-card:hover {
    background: #222;
    border-color: #fff;
}

body.page-words-gate:not(.page-gate--passion) .article-card > div:first-child:not(.article-card-media),
body.page-words-gate:not(.page-gate--passion) .article-card .article-card-body > div {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

body.page-words-gate:not(.page-gate--passion) .article-card h3 {
    order: 1;
    display: block;
    width: 100%;
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-words-gate:not(.page-gate--passion) .card-en-title {
    order: 2;
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.85rem;
    color: #ccc;
    font-style: italic;
    margin: 0 0 8px;
    border-bottom: 1px solid #333;
    padding-bottom: 6px;
    direction: ltr;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-words-gate:not(.page-gate--passion) .article-card p {
    order: 3;
    font-size: 0.85rem;
    color: #888;
    line-height: 1.4;
    margin: 0 0 10px;
    white-space: pre-line;
}

body.page-words-gate:not(.page-gate--passion) .article-card-video-meta {
    order: 3;
    font-size: 0.85rem;
    color: #888;
    line-height: 1.4;
    margin: 0 0 6px;
    font-weight: 400;
}

body.page-words-gate:not(.page-gate--passion) .article-card-video-meta-en {
    order: 4;
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.85rem;
    color: #ccc;
    font-style: italic;
    line-height: 1.4;
    margin: 0 0 8px;
    direction: ltr;
    text-align: left;
}

body.page-words-gate:not(.page-gate--passion) .lang-note {
    font-size: 0.7rem;
    color: #555;
    text-transform: uppercase;
    margin-top: auto;
}

@media (max-width: 950px) {
    body.page-words-gate:not(.page-gate--passion):not(.page-gate--history) .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    body.page-words-gate.page-gate--history .articles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    body.page-words-gate:not(.page-gate--passion):not(.page-gate--history) .articles-grid,
    body.page-words-gate.page-gate--history .articles-grid {
        grid-template-columns: 1fr;
        max-width: none;
    }
}

/* נייד: משוב נגיעה לכרטיסיות, מודאל PDF/HTML עם safe-area */
body.page-words-gate .article-card:active {
    background: #242424;
    border-color: #bbb;
}
body.page-words .gate-card:active {
    background: #242424;
    border-color: #bbb;
}
@media (max-width: 700px) {
    body.page-words-gate .modal {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        box-sizing: border-box;
    }
    body.page-words-gate .modal-content {
        width: min(98vw, calc(100vw - 12px));
        margin: 8px auto;
        height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        max-height: calc(100vh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }
    body.page-words-gate .site-home {
        bottom: max(12px, calc(8px + env(safe-area-inset-bottom, 0px))) !important;
        right: max(12px, calc(8px + env(safe-area-inset-right, 0px))) !important;
    }
    body.page-words .site-home {
        bottom: max(12px, calc(8px + env(safe-area-inset-bottom, 0px))) !important;
        right: max(12px, calc(8px + env(safe-area-inset-right, 0px))) !important;
    }
}