/* MOBILE_POLISH_V1 — max-width:767px فقط — هويات صريحة فقط */
@media (max-width: 767px) {
  .site-main { min-height: auto !important; }
  .site-footer { padding-top: 40px !important; padding-bottom: 28px !important; }
  .footer-grid { gap: 28px !important; margin-bottom: 28px !important; }
  .footer-brand > :not([hidden]) ~ :not([hidden]) { margin-top: 14px !important; margin-bottom: 0 !important; }
  .footer-brand img { height: 68px !important; width: auto !important; }
  .footer-brand p { max-width: 34ch; line-height: 1.7 !important; }
  
  
  
  .lib-filters { padding: 16px !important; margin-bottom: 28px !important; border-radius: 22px !important; box-shadow: 0 6px 20px rgba(15,23,42,.06) !important; }
  .lib-filter-row { gap: 10px !important; }
  .lib-search { height: 58px !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-inline-start: 52px !important; padding-inline-end: 16px !important; border-radius: 16px !important; font-size: 15px !important; }
  [dir="rtl"] .lib-search-icon { right: 18px !important; left: auto !important; }
  [dir="ltr"] .lib-search-icon { left: 18px !important; right: auto !important; }
  .lib-select { height: 58px !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-inline: 16px !important; border-radius: 16px !important; font-size: 14px !important; }
  .lib-filter-btn { width: 58px !important; height: 58px !important; border-radius: 16px !important; box-shadow: none !important; }
  .lib-filter-btn:hover { transform: none !important; }
  .lib-chip { padding: 8px 12px !important; font-size: 11px !important; letter-spacing: .04em !important; }
  .lib-grid { gap: 28px !important; }
  .lib-card { border-radius: 24px !important; min-height: 0 !important; height: auto !important; }
  .lib-card:hover { transform: none !important; box-shadow: 0 8px 22px rgba(15,23,42,.06) !important; }
  .lib-cover { width: 100% !important; aspect-ratio: auto !important; height: 250px !important; max-height: none !important; padding: 16px !important; }
  .lib-cover-image { width: auto !important; height: 100% !important; max-width: 100% !important; max-height: 218px !important; margin-inline: auto !important; object-fit: contain !important; display: block !important; }
  .lib-card-body { padding: 18px 16px 16px !important; }
  .lib-card-body > :not([hidden]) ~ :not([hidden]) { margin-top: 10px !important; }
  .lib-card-title { font-size: 17px !important; line-height: 1.45 !important; }
  .lib-card-description { font-size: 13.5px !important; line-height: 1.7 !important; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .lib-card-stats { gap: 10px !important; flex-wrap: wrap; }
  .lib-card-download { width: 42px !important; height: 42px !important; }
  .lib-pagination { margin-top: 32px !important; }
  .site-main, .site-footer, .lib-filters, .lib-card { max-width: 100%; }
  /* RELATED_LIBRARY_MOBILE_V1 */
  .related-section { margin-top: 48px !important; }
  .related-section > :not([hidden]) ~ :not([hidden]) { margin-top: 24px !important; }

  .related-head {
    align-items: flex-end !important;
    gap: 14px !important;
  }

  .related-head > div { min-width: 0 !important; }

  .related-eyebrow {
    font-size: 10px !important;
    letter-spacing: .12em !important;
  }

  .related-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  .related-view-all {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    gap: 6px !important;
  }

  .related-grid { gap: 22px !important; }

  .related-card {
    border-radius: 24px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .related-card:hover {
    transform: none !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.06) !important;
  }

  .related-cover {
    width: 100% !important;
    height: 230px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 16px !important;
  }

  .related-cover-image {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 198px !important;
    margin-inline: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  .related-body { padding: 16px !important; }

  .related-card-title {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .related-meta { padding-top: 12px !important; }

.lib-cover {
    height: 238px !important;
    padding: 0 !important;
  }

  .related-cover {
    height: 218px !important;
    padding: 0 !important;
  }

  .lib-cover-image,
  .related-cover-image {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
  }

  .lib-cover-image {
    max-height: 206px !important;
  }

  .related-cover-image {
    max-height: 186px !important;
  }

  .lib-cover:hover .lib-cover-image,
  .related-cover:hover .related-cover-image {
    transform: translate(-50%, -50%) !important;
  }

  .related-body {
    padding: 14px 16px 16px !important;
  }

  .related-card-title {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .related-section {
    margin-top: 40px !important;
  }

  .related-grid {
    gap: 18px !important;
  }
  /* LIBRARY_CARD_PARENT_LAYOUT_V3
     Root fix: force each mobile card to one vertical track and force cover/body
     to occupy the full inline size. This overrides any inherited/grid/flex split. */
  .lib-card,
  .related-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .lib-card > .lib-cover,
  .related-card > .related-cover,
  .lib-card > .lib-card-body,
  .related-card > .related-body {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
  }

  .lib-cover,
  .related-cover {
    inset-inline: auto !important;
    margin-inline: 0 !important;
  }

  .lib-cover-image,
  .related-cover-image {
    inset-inline-start: 50% !important;
    inset-inline-end: auto !important;
  }
  /* LIBRARY_MOBILE_FINAL_V4
     FINAL reset for Safari/iPhone:
     no absolute positioning, no logical inset, no split track. */
  .lib-card,
  .related-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    flex-direction: initial !important;
    align-items: initial !important;
    justify-content: initial !important;
  }

  .lib-card > .lib-cover,
  .related-card > .related-cover {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
    inset: auto !important;
    inset-inline: auto !important;
    inset-block: auto !important;
    grid-column: 1 / -1 !important;
    flex: none !important;
    flex-basis: auto !important;
    align-self: auto !important;
    overflow: hidden !important;
  }

  .lib-card > .lib-cover {
    height: 260px !important;
    max-height: 260px !important;
    aspect-ratio: auto !important;
  }

  .related-card > .related-cover {
    height: 240px !important;
    max-height: 240px !important;
    aspect-ratio: auto !important;
  }

  .lib-cover > .lib-cover-image,
  .related-cover > .related-cover-image {
    position: static !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    inset: auto !important;
    inset-inline: auto !important;
    inset-block: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: auto !important;
    margin-inline: auto !important;
    transform: none !important;
    translate: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .lib-cover > .lib-cover-image {
    max-height: 260px !important;
  }

  .related-cover > .related-cover-image {
    max-height: 240px !important;
  }

  .lib-cover:hover > .lib-cover-image,
  .related-cover:hover > .related-cover-image {
    transform: none !important;
  }

  .lib-card > .lib-card-body,
  .related-card > .related-body {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
    flex: none !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
  }

  .related-section {
    margin-top: 32px !important;
  }

  .related-section > :not([hidden]) ~ :not([hidden]) {
    margin-top: 20px !important;
  }

  .related-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }

  .related-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 18px !important;
  }

  .related-body {
    padding: 14px 16px 16px !important;
  }

  .related-card-title {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .related-meta {
    padding-top: 10px !important;
  }
}

/* =========================================================
   PRE-LAUNCH TABLET + DESKTOP FINAL POLISH
   768px and above only
   ========================================================= */
@media (min-width: 768px) {

.lib-cover-image {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100% - 32px) !important;
    max-height: calc(100% - 32px) !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    display: block !important;
  }

  .lib-cover:hover .lib-cover-image {
    transform: scale(1.02) !important;
  }

  /* Home final CTA: tighter + centered */
  .site-main > section:last-of-type {
    padding-bottom: 36px !important;
  }

  .site-main > section:last-of-type > div {
    text-align: center !important;
  }

  .site-main > section:last-of-type h2 {
    font-size: clamp(2.7rem, 4.2vw, 4.7rem) !important;
    line-height: 1.08 !important;
    max-width: none !important;
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
  }

  .site-main > section:last-of-type p {
    margin-inline: auto !important;
    text-align: center !important;
  }

  .site-main > section:last-of-type .relative.z-10 {
    text-align: center !important;
  }

  /* Footer: reduce vertical gap after final CTA */
  .site-footer {
    padding-top: 48px !important;
  }
}

/* iPad-safe title size */
@media (min-width: 768px) and (max-width: 1100px) {
  .site-main > section:last-of-type h2 {
    font-size: clamp(2.15rem, 5vw, 3.2rem) !important;
  }
}

.lib-card > .lib-cover > .lib-cover-image{
  position:static !important;
  inset:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  margin:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  translate:none !important;
  transform:none !important;
  flex:none !important;
}
.lib-card:hover > .lib-cover > .lib-cover-image,
.lib-cover:hover > .lib-cover-image{
  transform:scale(1.02) !important;
}

/* FOOTER_MOBILE_CENTER_V1 */
@media (max-width: 767px) {
    footer {
        text-align: center;
    }

    footer .kfc-row,
    footer [data-testid="footer-social"],
    footer .flex-wrap {
        justify-content: center;
    }

    footer p,
    footer h2,
    footer h3,
    footer h4 {
        text-align: center;
    }

    footer form {
        margin-inline: auto;
    }

    footer form .flex,
    footer .items-center {
        justify-content: center;
    }

    footer img {
        margin-inline: auto;
    }
}
/* /FOOTER_MOBILE_CENTER_V1 */

/* CONTACT_MOBILE_GAP_V1 */
@media (max-width: 767px) {
    body .max-w-\[1440px\] > .flex.flex-col.lg\:flex-row.gap-20 {
        gap: 3rem !important;
    }

    body .lg\:w-\[450px\].shrink-0.space-y-12 {
        margin-bottom: 0 !important;
    }

    body .flex-1.relative {
        margin-top: -1rem;
    }
}
/* /CONTACT_MOBILE_GAP_V1 */

/* FOOTER_MOBILE_BRAND_STACK_V1 */
@media (max-width: 767px) {

    footer [data-testid="footer-brand"],
    footer .footer-brand,
    footer .brand-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        gap: 0 !important;
    }

    footer [data-testid="footer-brand"] img,
    footer .footer-brand img,
    footer .brand-block img {
        display: block !important;
        width: 82px !important;
        height: 82px !important;
        object-fit: contain !important;
        margin: 0 auto 14px !important;
    }

    footer [data-testid="footer-brand"] h3,
    footer [data-testid="footer-brand"] h4,
    footer .footer-brand h3,
    footer .footer-brand h4,
    footer .brand-block h3,
    footer .brand-block h4 {
        width: 100% !important;
        margin: 0 0 10px !important;
        text-align: center !important;
        line-height: 1.35 !important;
    }

    footer [data-testid="footer-brand"] p,
    footer .footer-brand p,
    footer .brand-block p {
        max-width: 330px !important;
        margin: 0 auto 18px !important;
        text-align: center !important;
        line-height: 1.9 !important;
    }

    footer [data-testid="footer-contact-icons"],
    footer [data-testid="footer-social"] {
        justify-content: center !important;
        margin-inline: auto !important;
    }
}
/* /FOOTER_MOBILE_BRAND_STACK_V1 */

/* ===== KHALED MOBILE FOOTER BRAND FINAL ===== */
@media (max-width: 767px) {
    footer .grid > div:first-child {
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        text-align:center !important;
    }
    footer .grid > div:first-child > div:first-child {
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:2px !important;
        margin:0 0 6px !important;
    }
    footer .grid > div:first-child > div:first-child img {
        order:-1 !important;
        display:block !important;
        width:auto !important;
        max-height:72px !important;
        margin:0 auto 2px !important;
    }
    footer .grid > div:first-child h2,
    footer .grid > div:first-child h3 {
        margin:0 !important;
        text-align:center !important;
    }
    footer .grid > div:first-child > p {
        margin:4px auto 10px !important;
        max-width:340px !important;
        text-align:center !important;
        line-height:1.7 !important;
    }
    footer .kfc-row,
    footer [data-testid="footer-social"] {
        justify-content:center !important;
    }
}
/* ===== END KHALED MOBILE FOOTER BRAND FINAL ===== */


/* ==========================================================================
   LIBRARY_NEWSLETTER_CANONICAL_V2
   Single authoritative responsive layer.
   iPad + desktop only. Mobile remains untouched.
   ========================================================================== */


/* ==========================================================================
   DIGITAL LIBRARY — TRUE CARD AND COVER CENTERING
   ========================================================================== */

@media (min-width:768px) {

    /*
     * The card itself must sit in the geometric center of the grid cell.
     */
    .lib-card,
    [data-library-card] {
        width:100% !important;
        max-width:360px !important;

        margin-left:auto !important;
        margin-right:auto !important;
        margin-inline:auto !important;

        justify-self:center !important;
    }

    /*
     * Every direct cover holder becomes a real centered flex box.
     */
    .lib-card :has(> img),
    [data-library-card] :has(> img) {
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        text-align:center !important;
    }

    /*
     * Cover image itself.
     */
    .lib-card img,
    [data-library-card] img {
        display:block !important;

        object-fit:contain !important;
        object-position:center center !important;

        margin-left:auto !important;
        margin-right:auto !important;
        margin-inline:auto !important;

        align-self:center !important;
        justify-self:center !important;

        transform:none !important;
        translate:none !important;

        left:auto !important;
        right:auto !important;
    }

}


/* ==========================================================================
   FOOTER NEWSLETTER
   Email + action button behave as one aligned control.
   ========================================================================== */

@media (min-width:768px) {

    footer form:has(input[type="email"]),
    .site-footer form:has(input[type="email"]),
    [data-footer] form:has(input[type="email"]) {

        width:100% !important;

        display:flex !important;
        flex-wrap:nowrap !important;
        flex-direction:row !important;

        align-items:stretch !important;
        justify-content:flex-start !important;

        gap:10px !important;

        margin:0 !important;
    }


    footer form:has(input[type="email"]) input[type="email"],
    .site-footer form:has(input[type="email"]) input[type="email"],
    [data-footer] form:has(input[type="email"]) input[type="email"] {

        flex:1 1 auto !important;

        width:auto !important;
        min-width:0 !important;

        height:54px !important;
        min-height:54px !important;

        margin:0 !important;

        box-sizing:border-box !important;
    }


    footer form:has(input[type="email"]) button,
    footer form:has(input[type="email"]) input[type="submit"],

    .site-footer form:has(input[type="email"]) button,
    .site-footer form:has(input[type="email"]) input[type="submit"],

    [data-footer] form:has(input[type="email"]) button,
    [data-footer] form:has(input[type="email"]) input[type="submit"] {

        flex:0 0 54px !important;

        width:54px !important;
        min-width:54px !important;
        max-width:54px !important;

        height:54px !important;
        min-height:54px !important;
        max-height:54px !important;

        margin:0 !important;
        padding:0 !important;

        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        box-sizing:border-box !important;
    }


    /*
     * Arabic
     */
    html[dir="rtl"] footer form:has(input[type="email"]),
    html[dir="rtl"] .site-footer form:has(input[type="email"]),
    html[dir="rtl"] [data-footer] form:has(input[type="email"]) {
        direction:rtl !important;
    }


    /*
     * English
     */
    html[dir="ltr"] footer form:has(input[type="email"]),
    html[dir="ltr"] .site-footer form:has(input[type="email"]),
    html[dir="ltr"] [data-footer] form:has(input[type="email"]) {
        direction:ltr !important;
    }

}


/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width:1181px) {

    footer form:has(input[type="email"]) input[type="email"],
    .site-footer form:has(input[type="email"]) input[type="email"],
    [data-footer] form:has(input[type="email"]) input[type="email"] {
        height:56px !important;
        min-height:56px !important;
    }

    footer form:has(input[type="email"]) button,
    footer form:has(input[type="email"]) input[type="submit"],

    .site-footer form:has(input[type="email"]) button,
    .site-footer form:has(input[type="email"]) input[type="submit"],

    [data-footer] form:has(input[type="email"]) button,
    [data-footer] form:has(input[type="email"]) input[type="submit"] {

        flex-basis:56px !important;

        width:56px !important;
        min-width:56px !important;
        max-width:56px !important;

        height:56px !important;
        min-height:56px !important;
        max-height:56px !important;
    }

}


/*
 * Mobile intentionally unchanged.
 */


/* ==========================================================================
   LIBRARY_COVER_GEOMETRIC_CENTER_V3
   Geometric cover stage — iPad + desktop
   ========================================================================== */

@media (min-width:768px) {

    /*
     * The element directly holding the book cover becomes a full-width,
     * geometrically centered stage.
     */
    .lib-card :has(> img),
    [data-library-card] :has(> img) {
        width:100% !important;

        display:grid !important;
        place-items:center !important;

        margin-left:auto !important;
        margin-right:auto !important;
        margin-inline:auto !important;

        padding-left:16px !important;
        padding-right:16px !important;

        box-sizing:border-box !important;

        overflow:hidden !important;
    }

    /*
     * The cover is centered by its actual box rather than by text direction
     * or inherited flex/grid alignment.
     */
    .lib-card :has(> img) > img,
    [data-library-card] :has(> img) > img {
        display:block !important;

        position:static !important;

        inset:auto !important;
        left:auto !important;
        right:auto !important;

        float:none !important;

        margin-left:auto !important;
        margin-right:auto !important;
        margin-inline:auto !important;

        justify-self:center !important;
        align-self:center !important;

        object-fit:contain !important;
        object-position:50% 50% !important;

        transform:none !important;
        translate:none !important;

        max-width:100% !important;

        box-sizing:border-box !important;
    }

}

/* Mobile intentionally unchanged. */