/* SadaeHaq homepage theme overrides.
   Hand-authored plain CSS, loaded directly (not through the Tailwind/Vite build),
   so it applies immediately without a asset rebuild. */

/* Text reads right-to-left, but the page layout (flex/grid item order, column
   order) stays left-to-right as authored. html[dir] is "ltr" so layout direction
   defaults to LTR. `direction` is an inherited property, so just setting it on
   flex/grid containers would leak into every element nested inside them (cards
   inside a grid, text inside a flex row, etc). Fix: every element gets an
   explicit `direction: rtl` via the universal selector, then flex/grid
   containers get `direction: ltr` via a class selector. Class selectors always
   outrank the universal selector regardless of source order, and this is
   resolved per element (not via inheritance), so it holds at any nesting depth —
   a flex/grid container nested inside another one still gets its own `ltr`. */
/* font-sans resolves via the --font-sans custom property (DM Sans) set in
   resources/css/app.css, so no override is needed here any more. */

/* * { direction: rtl; } */

.flex, .inline-flex, .grid,
[class*=" flex"], [class^="flex"],
[class*=" inline-flex"], [class^="inline-flex"],
[class*=" grid"], [class^="grid"] {
    direction: ltr;
}

#site-header { transition: background-color .35s ease, box-shadow .35s ease; }

#site-header.site-header--home {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: transparent !important;
    border-bottom-color: transparent !important;
    z-index: 50;
}
#site-header.site-header--home:not(.is-scrolled) a,
#site-header.site-header--home:not(.is-scrolled) .site-logo__text {
    text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
#site-header.site-header--home.is-scrolled {
    position: fixed;
    background: #0c0c0e !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.08);
}

.site-logo__img { height: 5.5rem; width: auto; }

.site-search-toggle {
    width: 2.25rem; height: 2.25rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    color: #fff;
    background: rgba(255,255,255,.08);
    border: none;
    cursor: pointer;
    transition: background .2s ease;
}
.site-search-toggle:hover { background: rgba(255,255,255,.2); }

.site-search-box {
    display: none;
    align-items: center;
    gap: .5rem;
    position: absolute;
    top: calc(100% + .6rem);
    right: 0;
    background: #17171b;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    border-radius: 9999px;
    padding: .4rem .5rem .4rem 1.1rem;
    z-index: 60;
}
.site-search-box.is-open { display: flex; }
.site-search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: .85rem;
    width: 11rem;
}
.site-search-box input::placeholder { color: rgba(255,255,255,.6); }
@media (max-width: 480px) {
    .site-search-box { right: -3rem; }
    .site-search-box input { width: 8rem; }
}

/* Hero */
.site-hero {
    height: 535px;
    position: relative;
    background-size: cover;
    background-position: center;
    padding-top: 9rem;
}
/* .site-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(12,12,14,.8) 0%, rgba(12,12,14,.32) 32%, rgba(12,12,14,.5) 72%, rgba(12,12,14,.92) 100%);
} */
.site-hero > * { position: relative; z-index: 1; }

@media (max-width: 640px) {
    .site-hero { padding-top: 10.5rem; }
}

/* Featured mosaic tiles */
.site-mosaic-tile { transition: transform .35s ease; }
.site-mosaic-tile:hover { transform: scale(1.045); }


/* Header row: guaranteed height, immune to Tailwind purge (h-20 was not compiled). */
.site-header-row { min-height: 5rem; }

/* Latest-episode feature visual (image + offset border + centered play button) */
.site-feature-visual__frame {
    position: absolute;
    inset: 0;
    transform: translate(-1rem, -1rem);
    border-radius: 1.5rem;
}
.site-feature-visual__image {
    position: relative;
    border-radius: 1.5rem;
}
.site-feature-visual__play {
    border: 2px solid #000;
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(30%, 0%);
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 9999px;
    background: #fff;
    color: #f4471b;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.28);
    transition: transform .2s ease;
}
.site-feature-visual__play:hover { transform: translate(30%, 0%) scale(1.08); }

/* Episode descriptions: Urdu (RTL) paragraphs from the rich editor */
.prose [dir="rtl"] {
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif;
    text-align: right;
    font-size: 1.25em;
    line-height: 2.2;
}
.prose p { text-indent: 0; }

/* Episode list thumbnails: match the 3:2 landscape cover art (same image as the
   episode hero) so nothing is cropped, and don't stretch to the card's height. */
.episode-thumb {
    width: 100%;
    height: -webkit-fill-available;
    aspect-ratio: 3 / 2;
}
@media (min-width: 640px) {
    .episode-thumb { width: 537px; }
}

/* Cover-artwork hero (episode / series / post detail pages): full width, 50% of
   the screen height. The whole image is contained (never cropped) over a blurred
   copy of itself; the transparent header overlays the top. */
.artwork-hero {
    position: relative;
    overflow: hidden;
    height: 50vh;
    min-height: 420px;
    background: #0c0c0e;
}
.artwork-hero__backdrop,
.artwork-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.artwork-hero__backdrop {
    object-fit: cover;
    filter: blur(40px) brightness(.45);
    transform: scale(1.2);
}
.artwork-hero__img { object-fit: contain; }
.artwork-hero__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(12,12,14,.6) 0%, rgba(12,12,14,0) 25%),
        linear-gradient(to top, rgba(12,12,14,.85) 0%, rgba(12,12,14,0) 40%);
}
.artwork-hero__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding-bottom: 1.5rem;
}
.artwork-hero__caption h1 { font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.15; }

/* Whole-image thumbnail for cards of any shape */
.fit-image {
    position: absolute;
    inset: 0;
    /* overflow: hidden; */
}
.fit-image__backdrop,
.fit-image__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.fit-image__backdrop {
    object-fit: cover;
    filter: blur(20px) brightness(.6);
    transform: scale(1.2);
}
.fit-image__img {
    object-fit: cover;
    transition: transform .3s ease;
    height: 100%;
}
.group:hover .fit-image__img { transform: scale(1.05); }