/* =====================================================================
   chessforarab.com — the "Desert Dusk" landing (Kamal, 2026-10-07, design B)
   Loaded only by Views/Home/_LandingChessForArab.cshtml, which Home/Index
   renders only for a logged-out visitor on a chessforarab address. Every
   rule is a two-class selector under .cfa-landing so no global stylesheet
   (site.css, mobile-public.css, turkchess-auth.css) outranks it.

   One fixed dark palette in every case (the public pages have no light mode):
     text      #fff3e3 on #1a0f1c page  = 16.9:1
     text      #fff3e3 on #24142a card  = 15.2:1
     muted     #d2b9b0 on #24142a card  =  9.1:1
     dark text #2a1405 on amber #f2a541 =  8.5:1 (buttons, number badges)
     amber     #ffcf86 on #24142a card  = 11.6:1 (icons, links)
     card #24142a on page #1a0f1c is faint, so every card carries a #4a2c45
     border (layer 3).
   ===================================================================== */

.cfa-landing {
    --cfa-bg: #1a0f1c;
    --cfa-card: #24142a;
    --cfa-card2: #2c1a30;
    --cfa-line: #4a2c45;
    --cfa-amb: #f2a541;
    --cfa-amb2: #ffcf86;
    --cfa-tx: #fff3e3;
    --cfa-mu: #d2b9b0;
    --cfa-on-amb: #2a1405;
    /* the event showcase reads these theme tokens (event-showcase.css) */
    --theme-card-bg-solid: #24142a;
    --theme-bg-primary: #1a0f1c;
    --theme-text-primary: #fff3e3;
    --theme-text-secondary: #d2b9b0;
    --theme-card-border: rgba(242, 165, 65, 0.28);
    --theme-accent-primary: #c2410c;   /* white on it 5.2:1 (the chosen-section pill) */
    --theme-table-header-bg: #3a2236;
    --theme-table-header-text: #fff3e3;
    --theme-table-row-hover: rgba(242, 165, 65, 0.12);
    color: var(--cfa-tx);
    /* the page frame pads its content below the fixed bar; the hero slides
       up under the translucent bar instead (values match turkchess-auth.css) */
    margin-top: -80px;
    margin-bottom: -2rem;
}

.cfa-landing *,
.cfa-landing *::before,
.cfa-landing *::after {
    box-sizing: border-box;
}

.cfa-landing h1,
.cfa-landing h2,
.cfa-landing h3,
.cfa-landing h4,
.cfa-landing p {
    margin: 0;
}

.cfa-landing .cfa-disp {
    font-family: 'Aref Ruqaa', serif;
    font-weight: 700;
}

/* ===== Buttons ===== */
.cfa-landing .cfa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 40px;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    padding: 14px 28px;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.cfa-landing .cfa-btn-amb {
    background: var(--cfa-amb);
    border-color: var(--cfa-amb);
    color: var(--cfa-on-amb);
}

.cfa-landing .cfa-btn-amb:hover {
    background: #ffb85c;
    border-color: #ffb85c;
    color: var(--cfa-on-amb);
    transform: translateY(-1px);
}

.cfa-landing .cfa-btn-amb:active {
    background: #d98d2c;
    border-color: #d98d2c;
    color: var(--cfa-on-amb);
    transform: none;
}

.cfa-landing .cfa-btn-ghost {
    background: rgba(26, 15, 28, 0.4);
    border-color: rgba(255, 243, 227, 0.55);
    color: var(--cfa-tx);
}

.cfa-landing .cfa-btn-ghost:hover {
    background: rgba(255, 243, 227, 0.14);
    color: #fff;
}

.cfa-landing .cfa-btn-ghost:active {
    background: rgba(255, 243, 227, 0.24);
    color: #fff;
}

.cfa-landing .cfa-btn:focus-visible,
.cfa-landing .cfa-bar a:focus-visible {
    outline: 2px solid var(--cfa-amb2);
    outline-offset: 2px;
}

/* ===== Hero ===== */
.cfa-landing .cfa-hero {
    position: relative;
    /* the picture scales with the width (cover), so the height that shows the
       whole king under the top bar grows with it too */
    min-height: max(360px, calc(21vw + 70px));
    display: flex;
    align-items: center;
    padding: 84px 6vw 14px;
    overflow: hidden;
}

/* the picture: sun and pieces on the side away from the text. It reaches
   below the hero (clipped) by the height of the flat dark dune at its foot
   (about 7.8% of the width at cover size), so no empty band shows above the
   page body. */
.cfa-landing .cfa-hero-bg {
    position: absolute;
    inset: 0 0 -7.8vw 0;
    background: #1a0f1c url(../images/chessforarab-dusk.svg) 22% 100% / cover no-repeat;
}

[dir="ltr"] .cfa-landing .cfa-hero-bg {
    transform: scaleX(-1);
}

.cfa-landing .cfa-hero-text {
    position: relative;
    max-width: 560px;
    /* the text sits at the reading start (right in RTL, left in LTR); the sun is
       on the left in RTL and the picture is mirrored in LTR, so they never meet */
    margin-inline-end: auto;
}

.cfa-landing .cfa-kick {
    font-size: 0.85rem;
    letter-spacing: 0.25em;
    color: var(--cfa-amb2);
    font-weight: 700;
}

.cfa-landing .cfa-title {
    font-family: 'Aref Ruqaa', serif;
    font-weight: 700;
    font-size: 5.2rem;
    line-height: 1.5;               /* Aref Ruqaa's tails (ج، ع) reach far below the line */
    color: #fff;
    margin: 0 0 18px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
}

.cfa-landing .cfa-sub {
    font-size: 1.2rem;
    line-height: 1.75;
    color: #f6dfcf;
    margin-bottom: 26px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.cfa-landing .cfa-hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ===== Body below the hero ===== */
.cfa-landing .cfa-body {
    position: relative;
    background: var(--cfa-bg);
    padding-bottom: 8px;
}

.cfa-landing .cfa-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.cfa-landing .cfa-events {
    position: relative;
    z-index: 2;
    margin-top: -56px;
    padding-bottom: 14px;
}

.cfa-landing .cfa-events .esw {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    border-radius: 16px;
}

.cfa-landing .cfa-banner {
    margin: 10px 0 0;
    background: #3a2236;
    color: #fff3e3;
    border: 1px solid var(--cfa-line);
    border-radius: 10px;
    padding: 8px 16px;
    text-align: center;
    font-size: 0.95rem;
}

/* videos + rules */
.cfa-landing .cfa-media {
    display: grid;
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 6px;
}

.cfa-landing .cfa-media.cfa-v1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
.cfa-landing .cfa-media.cfa-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cfa-landing .cfa-media.cfa-v3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cfa-landing .cfa-vid {
    position: relative;
    padding-bottom: 56.25%;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--cfa-line);
}

.cfa-landing .cfa-vid > div {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cfa-landing .cfa-rules {
    max-width: 820px;
    margin: 0 auto;
    padding-top: 12px;
}

.cfa-landing .site-rules-card {
    background: var(--cfa-card);
    border: 1px dashed rgba(242, 165, 65, 0.55);
    border-radius: 14px;
}

.cfa-landing .site-rules-card:hover {
    background: var(--cfa-card2);
}

.cfa-landing .site-rules-title {
    color: var(--cfa-tx);
    font-size: 1rem;
}

.cfa-landing .site-rules-chevron {
    color: var(--cfa-amb);
}

.cfa-landing .site-rules-body p,
.cfa-landing .site-rules-body ul li {
    color: #ead8cf;
}

.cfa-landing .site-rules-body strong {
    color: var(--cfa-amb2);
}

/* section heads */
.cfa-landing .cfa-sec {
    padding-top: 38px;
}

.cfa-landing .cfa-shead {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 16px;
    border-bottom: 1px solid var(--cfa-line);
    padding-bottom: 10px;
    margin-bottom: 18px;
}

.cfa-landing .cfa-stitle {
    font-family: 'Aref Ruqaa', serif;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.5;
    color: #fff;
}

.cfa-landing .cfa-ssub {
    color: var(--cfa-mu);
    font-size: 1rem;
}

/* features: two columns of icon rows */
.cfa-landing .cfa-feat {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 44px;
}

.cfa-landing .cfa-fi {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(74, 44, 69, 0.6);
}

.cfa-landing .cfa-ic {
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #3a2236;
    color: var(--cfa-amb2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.cfa-landing .cfa-fi h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 3px;
}

.cfa-landing .cfa-fi p {
    font-size: 0.93rem;
    line-height: 1.7;
    color: var(--cfa-mu);
}

/* members / admins */
.cfa-landing .cfa-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--cfa-line);
}

.cfa-landing .cfa-pan {
    padding: 22px 26px;
    background: var(--cfa-card);
}

.cfa-landing .cfa-pan.cfa-adm {
    background: linear-gradient(160deg, #5a2a2e, #3a1a26);
}

.cfa-landing .cfa-ph {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.cfa-landing .cfa-ph h3 {
    font-size: 1.45rem;
    font-weight: 800;
    color: #fff;
}

.cfa-landing .cfa-ph small {
    color: var(--cfa-mu);
    font-size: 0.85rem;
}

.cfa-landing .cfa-adm .cfa-ph small {
    color: #f0cdbd;
}

.cfa-landing .cfa-adm .cfa-ic {
    background: rgba(255, 243, 227, 0.14);
}

.cfa-landing .cfa-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px 18px;
}

.cfa-landing .cfa-ul.cfa-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cfa-landing .cfa-ul li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.93rem;
    line-height: 1.5;
    color: #f3e4d8;
}

.cfa-landing .cfa-ul li i {
    flex: none;
    color: var(--cfa-amb);
    margin-top: 1px;
}

/* steps: a dotted timeline */
.cfa-landing .cfa-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: relative;
}

.cfa-landing .cfa-steps::before {
    content: '';
    position: absolute;
    top: 26px;
    left: 16%;
    right: 16%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--cfa-amb) 0 10px, transparent 10px 18px);
}

.cfa-landing .cfa-st {
    position: relative;
    text-align: center;
    padding: 0 10px;
}

.cfa-landing .cfa-num {
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--cfa-amb);
    color: var(--cfa-on-amb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.4rem;
    box-shadow: 0 0 0 8px var(--cfa-bg);
}

.cfa-landing .cfa-st h3 {
    font-size: 1.15rem;
    color: #fff;
    margin-bottom: 3px;
}

.cfa-landing .cfa-st p {
    color: var(--cfa-mu);
    font-size: 0.93rem;
}

/* tournament formats */
.cfa-landing .cfa-fmts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.cfa-landing .cfa-fc {
    background: var(--cfa-card);
    border: 1px solid var(--cfa-line);
    border-top: 3px solid var(--cfa-amb);
    border-radius: 16px;
    padding: 18px;
}

.cfa-landing .cfa-pc {
    display: block;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--cfa-amb2);
    margin-bottom: 6px;
}

.cfa-landing .cfa-fc h3 {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 5px;
}

.cfa-landing .cfa-fc p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--cfa-mu);
}

/* own your club */
.cfa-landing .cfa-own {
    display: flex;
    align-items: center;
    gap: 22px;
    background: var(--cfa-card);
    border: 1px solid var(--cfa-line);
    border-radius: 20px;
    padding: 22px 26px;
}

.cfa-landing .cfa-own .cfa-ic {
    width: 60px;
    height: 60px;
    font-size: 1.6rem;
}

.cfa-landing .cfa-own h2 {
    font-family: 'Aref Ruqaa', serif;
    font-size: 1.9rem;
    color: #fff;
    margin-bottom: 4px;
}

.cfa-landing .cfa-own p {
    color: var(--cfa-mu);
    font-size: 0.95rem;
    line-height: 1.8;
}

.cfa-landing .cfa-own .cfa-btn {
    flex: none;
}

/* final call: a second, shorter dusk */
.cfa-landing .cfa-cta {
    position: relative;
    margin-top: 40px;
    min-height: 280px;
    overflow: hidden;
    text-align: center;
    padding: 50px 20px 80px;
}

.cfa-landing .cfa-cta .cfa-hero-bg {
    inset: 0;
    background-position: 50% 100%;
}

.cfa-landing .cfa-own h2,
.cfa-landing .cfa-cta h2 {
    line-height: 1.5;
}

.cfa-landing .cfa-cta-in {
    position: relative;
}

.cfa-landing .cfa-cta h2 {
    font-family: 'Aref Ruqaa', serif;
    font-size: 3rem;
    color: #fff;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.cfa-landing .cfa-cta p {
    font-size: 1.1rem;
    color: #f6dfcf;
    margin: 6px 0 20px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* phone-only pieces */
.cfa-landing .cfa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cfa-landing .cfa-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cfa-card);
    border: 1px solid var(--cfa-line);
    border-radius: 20px;
    padding: 6px 11px;
    font-size: 0.85rem;
    color: #f3e4d8;
}

.cfa-landing .cfa-chip i {
    color: var(--cfa-amb);
}

.cfa-landing .cfa-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(26, 15, 28, 0.97);
    border-top: 1px solid var(--cfa-line);
}

.cfa-landing .cfa-bar .cfa-btn {
    padding: 12px 8px;
}

/* ===== Narrow windows and phones ===== */
@media (max-width: 992px) {
    .cfa-landing .cfa-fmts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cfa-landing .cfa-media.cfa-v3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .cfa-landing { margin-top: -70px; margin-bottom: -1.5rem; }

    /* the picture on top, the words over its sky, buttons underneath */
    .cfa-landing .cfa-hero {
        min-height: 330px;           /* grows if a narrow desktop window also holds the buttons */
        align-items: flex-start;
        justify-content: center;
        text-align: center;
        padding: 64px 12px 12px;
    }

    .cfa-landing .cfa-hero-bg {
        inset: 0;                    /* phones keep the whole picture, dunes included */
        background-position: 26% 100%;
    }

    .cfa-landing .cfa-hero-text,
    [dir="ltr"] .cfa-landing .cfa-hero-text {
        margin: 0 auto;
        max-width: 100%;
    }

    .cfa-landing .cfa-kick { display: none; }
    .cfa-landing .cfa-title { font-size: 3.1rem; line-height: 1.45; margin: 0 0 10px; }
    .cfa-landing .cfa-sub { font-size: 0.98rem; line-height: 1.6; margin: 0; }

    .cfa-landing .cfa-hero-btns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 8px 8px 0;
    }

    .cfa-landing .cfa-hero-btns .cfa-btn { padding: 12px 8px; }
    .cfa-landing .cfa-hero-btns .cfa-full { grid-column: 1 / 3; }

    .cfa-landing .cfa-wrap { padding: 0 8px; }
    .cfa-landing .cfa-events { margin-top: 0; padding-top: 8px; padding-bottom: 0; }
    .cfa-landing .cfa-events .esw { box-shadow: none; border-radius: 12px; margin-bottom: 0; }

    .cfa-landing .cfa-media,
    .cfa-landing .cfa-media.cfa-v1,
    .cfa-landing .cfa-media.cfa-v2,
    .cfa-landing .cfa-media.cfa-v3 {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding-top: 8px;
        padding-bottom: 0;
    }

    .cfa-landing .cfa-vid { border-radius: 10px; }
    .cfa-landing .cfa-rules { padding-top: 8px; }

    .cfa-landing .cfa-sec { padding-top: 12px; }
    .cfa-landing .cfa-shead { margin-bottom: 8px; padding-bottom: 4px; }
    .cfa-landing .cfa-stitle { font-size: 1.6rem; }
    .cfa-landing .cfa-ssub { font-size: 0.85rem; }

    .cfa-landing .cfa-feat,
    .cfa-landing .cfa-split,
    .cfa-landing .cfa-ul.cfa-two { grid-template-columns: minmax(0, 1fr); }

    .cfa-landing .cfa-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .cfa-landing .cfa-steps::before { display: none; }

    .cfa-landing .cfa-st {
        display: flex;
        align-items: center;
        gap: 10px;
        text-align: start;
        padding: 0;
    }

    .cfa-landing .cfa-num {
        width: 34px;
        height: 34px;
        margin: 0;
        flex: none;
        font-size: 1rem;
        box-shadow: none;
    }

    .cfa-landing .cfa-st h3 { font-size: 1rem; margin: 0; }
    .cfa-landing .cfa-st p { font-size: 0.82rem; }

    .cfa-landing .cfa-fmts { gap: 6px; }
    .cfa-landing .cfa-fc { padding: 8px 10px; border-radius: 12px; display: flex; align-items: center; gap: 8px; }
    .cfa-landing .cfa-pc { font-size: 1.7rem; margin: 0; }
    .cfa-landing .cfa-fc h3 { font-size: 0.95rem; margin: 0; }
    .cfa-landing .cfa-fc p { display: none; }

    .cfa-landing .cfa-own { flex-direction: column; align-items: stretch; text-align: center; padding: 14px; gap: 10px; }
    .cfa-landing .cfa-own .cfa-ic { display: none; }
    .cfa-landing .cfa-own h2 { font-size: 1.45rem; }

    .cfa-landing .cfa-cta { margin-top: 14px; min-height: 0; padding: 26px 12px 60px; }
    .cfa-landing .cfa-cta h2 { font-size: 2rem; }
    .cfa-landing .cfa-cta p { font-size: 0.95rem; margin: 4px 0 12px; }

}

/* Phone bottom bar (phones are told by their browser, not their width, so
   these hold at any width). The bar is fixed inside the frame's main area,
   which stacks level with the footer — lift the main area above it, and give
   the footer room at the end so the bar never covers the copyright line. */
body.cfa-auth .tc-auth-main:has(.cfa-bar) {
    z-index: 3;
}

body.cfa-auth:has(.cfa-bar) .tc-auth-footer {
    padding-bottom: 72px;
}

/* the site rules keep their paragraph gaps (the reset above would remove them) */
.cfa-landing .site-rules-body p {
    margin-bottom: 0.5rem;
}

/* events: the "all followed tournaments" link turns amber, not the darker
   section accent, on hover (amber on the page 11.6:1) */
.cfa-landing .esw-all:hover {
    color: var(--cfa-amb2);
}

@media (max-width: 576px) {
    .cfa-landing { margin-top: -58px; margin-bottom: -1rem; }
    .cfa-landing .cfa-hero { min-height: 300px; padding-top: 58px; }
    .cfa-landing .cfa-title { font-size: 2.7rem; }
}