/* Muslim Diaspora Portal — home page.
   The shared layout wraps the body in .container, so full-bleed bands
   break out with a negative inline margin; the overflow guard keeps the
   100vw arithmetic from producing a horizontal scrollbar. */

html {
    overflow-x: hidden;
}

.dp-bleed {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
}

/* ---------- Hero ---------- */

/* The hero announces the forthcoming Forum, so it is composed on the centre line:
   organisers, motto, title, date and place read as one stacked block. */
.dp-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: -1.5rem;
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.25rem);
    background: radial-gradient( 120% 140% at 100% 0%, rgba(45, 138, 128, .55) 0%, rgba(45, 138, 128, 0) 55% ), linear-gradient( 160deg, #12403d 0%, #1b5e5a 55%, #124b47 100% );
    color: #fff;
    text-align: center;
}

    /* Backdrop lives on a pseudo-element. The text now runs down the middle, so the
   scrim falls from top to bottom and covers the whole width — no side on which the
   artwork can swallow a line, and nothing to mirror for RTL. The URL is relative,
   so it still resolves when the app is hosted under a virtual directory. */
    .dp-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient( 180deg, rgba(18, 64, 61, .58) 0%, rgba(18, 64, 61, .72) 45%, rgba(18, 64, 61, .84) 100% ), url("../img/hero-network.svg") center / cover no-repeat;
    }

/* Organisers, straight on the backdrop. The emblems come in their own colours, so
   they are flattened to white: brightness(0) takes every opaque pixel to black and
   invert(1) lifts it to white, leaving the transparency alone. */
.dp-hero-partners {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    /* Set down from the top of the band rather than sitting against it. The gap below is
       trimmed by about as much as the gap above grows, so the rest of the hero stays
       where it was. */
    margin: clamp(1rem, .5rem + 1.4vw, 2rem) auto clamp(2.6rem, 2rem + 1.5vw, 3.2rem);
}

/* The captions are out of the flow, so the room they need is taken here instead. Below
   the breakpoint that hides them the row goes back to its own spacing. */
@media (max-width: 767.98px) {
    .dp-hero-partners {
        margin-bottom: clamp(1.4rem, .8rem + 1.5vw, 2rem);
    }
}

/* A veil over the backdrop where the row sits. The globe throws lines and rays across
   this band and they met the marks at full strength; this settles them without moving
   anything in the artwork. It has no hard edge of its own - the gradient is out to
   nothing well before the band ends - so what the reader sees is the lines going quiet
   around the marks, not a panel behind them. */
.dp-hero-partners::before {
    content: "";
    position: absolute;
    inset: -3rem -7rem;
    z-index: -1;
    background: radial-gradient( ellipse at center,
                rgba(15, 58, 55, .72) 0%,
                rgba(15, 58, 55, .52) 40%,
                rgba(15, 58, 55, .22) 65%,
                rgba(15, 58, 55, 0)   82% );
    pointer-events: none;
}

.dp-hero-partners img {
    height: clamp(2.5rem, 1.6rem + 2.4vw, 3.75rem);
    width: auto;
    /* Whitened, then given a dark halo that follows the shape of the mark itself. The
       backdrop is a network of nodes and lines, and a line running behind an emblem used
       to cut straight across it; the halo dims the artwork just where it meets the mark,
       so the two stop crossing without a plate being put under the row. */
    filter: brightness(0) invert(1)
            drop-shadow(0 0 6px rgba(9, 43, 41, .6));
}

/* The YTB mark is a wordmark, not a round seal: at the shared height it carries far
   less ink than the two emblems and reads as the smaller of the three. It is set
   taller so the row weighs the same across. */
.dp-hero-partners .dp-partner-wordmark {
    height: clamp(3.35rem, 2.15rem + 3.2vw, 5rem);
}

/* The Council of Foreign Ministers mark is an outlined oval of fine type, so it puts
   less ink on the line than the seals do. A step up, short of the wordmark. */
.dp-hero-partners .dp-partner-badge {
    height: clamp(3rem, 1.9rem + 2.8vw, 4.4rem);
}

/* The rule between marks is drawn beside the item rather than as its border, because a
   border needs padding to sit off the mark and that padding shifts the item's box away
   from the mark inside it. Anything centred on the box - the name under the seal, the
   label on hover - then came out off-centre from the mark itself. */
.dp-partner + .dp-partner {
    margin-inline-start: 4rem;
}

    .dp-partner + .dp-partner::before {
        content: "";
        position: absolute;
        inset-inline-start: -2rem;
        top: 50%;
        transform: translateY(-50%);
        height: 2.75rem;
        border-inline-start: 1px solid rgba(255, 255, 255, .28);
    }

/* The marks are emblems, and an emblem does not say whose it is. The name is on the
   alt text for anyone reading the page aloud; this puts it in front of a pointer too.
   focus-within brings it up for the keyboard, and a pointer that cannot hover simply
   never sees it, which is why nothing here is the only route to the name. */
.dp-partner {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.dp-partner-label {
    position: absolute;
    top: calc(100% + .6rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: max-content;
    max-width: 15rem;
    padding: .45rem .7rem;
    border-radius: .3rem;
    background: rgba(9, 43, 41, .96);
    color: #fff;
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .02em;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s ease;
}

.dp-partner:hover .dp-partner-label,
.dp-partner:focus-within .dp-partner-label {
    opacity: 1;
    visibility: visible;
}

/* The two ministries are set as the backdrop sets them: the seal with the name beneath
   it. The caption hangs out of the flow so the seals stay on the same line as the three
   marks that have no name under them; the room for it is taken from the row's own
   bottom margin. */
.dp-partner-caption {
    position: absolute;
    top: calc(100% + .5rem);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 8rem;
    color: rgba(255, 255, 255, .82);
    font-family: var(--font-ui);
    font-size: .55rem;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.35;
    text-align: center;
    /* No text-transform here. The browser cases by the document's language, and in English
       it turns the i of Disisleri into a dotless I; the names are written in capitals in
       the markup instead, where Turkish keeps its dotted ones. */
}

/* Below this the marks sit close enough that a caption would run under its neighbours,
   so the names stay in the alt text alone. */
/*@media (max-width: 767.98px) {
    .dp-partner-caption {
        display: none;
    }
}*/
/* Keep ministry names visible on mobile */
@media (max-width: 767.98px) {
    .dp-partner-caption {
        display: block;
        top: calc(100% + .35rem);
        width: 5.5rem;
        max-width: 5.5rem;
        font-size: .25rem;
        line-height: 1.25;
        letter-spacing: .04em;
        white-space: normal;
    }

    .dp-hero-partners {
        margin-bottom: 2.5rem;
    }
}

/* Wrapped rows would leave a rule hanging at the start of a line. */
@media (max-width: 575.98px) {
    .dp-hero-partners {
        gap: 1.1rem;
        row-gap: 2.5rem;
    }

    .dp-partner + .dp-partner {
        margin-inline-start: 0;
    }

        .dp-partner + .dp-partner::before {
            content: none;
        }

    .dp-hero-partners img {
        height: 2.25rem;
    }

    .dp-hero-partners .dp-partner-wordmark {
        height: 2.9rem;
    }

    .dp-hero-partners .dp-partner-badge {
        height: 2.65rem;
    }

    .dp-partner-caption {
        width: 5.2rem;
        max-width: 5.2rem;
        font-size: .25rem;
    }
}

/* The motto of the Forum, ruled on both sides. */
.dp-hero-motto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    margin-bottom: 1.4rem;
    color: var(--portal-gold);
    font-size: clamp(.72rem, .65rem + .25vw, .85rem);
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

    .dp-hero-motto::before,
    .dp-hero-motto::after {
        content: "";
        width: clamp(1.25rem, 5vw, 4rem);
        height: 1px;
        background: rgba(240, 185, 91, .5);
    }

.dp-hero h1 {
    margin-bottom: 1.25rem;
    font-size: clamp(1.9rem, 1.1rem + 3vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
}

    /* Second line of the title, set smaller so the ordinal carries the emphasis. */
    .dp-hero h1 span {
        display: block;
        margin-top: .5rem;
        color: rgba(255, 255, 255, .86);
        font-size: .5em;
        font-weight: 600;
        letter-spacing: .01em;
    }

.dp-hero-lead {
    width: min(100%, 72rem);
    margin: 0 auto 2rem;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem);
    line-height: 1.7;
}

.dp-hero-date {
    color: var(--portal-gold);
    font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
    font-weight: 700;
    letter-spacing: .14em;
}

.dp-hero-place {
    margin-top: .45rem;
    color: rgba(255, 255, 255, .8);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.dp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 2rem;
}

/* ---------- Conference countdown ---------- */

.dp-countdown-band {
    --countdown-background: #0d302e;
    --countdown-accent: var(--portal-gold);
    --countdown-text: #d7e7e6;
    --countdown-border: rgba(240, 185, 91, .42);
    --countdown-separator: rgba(240, 185, 91, .24);
    position: relative;
    overflow: hidden;
    padding-block: 2rem 2.4rem;
    background: radial-gradient( circle at 12% 30%, rgba(255, 255, 255, .035) 0 1px, transparent 1.5px ), radial-gradient( circle at 82% 65%, rgba(255, 255, 255, .025) 0 1px, transparent 1.5px ), var(--countdown-background);
    background-size: 42px 42px, 56px 56px, auto;
    color: #fff;
}

.dp-countdown-inner {
    width: min(100%, 920px);
    margin-inline: auto;
}

.cd-label {
    margin-bottom: 1.3rem;
    color: var(--countdown-accent);
    font-size: clamp(.95rem, 1.5vw, 1.2rem);
    font-weight: 700;
    letter-spacing: .2em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}

.countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    width: 100%;
    border: 1px solid var(--countdown-border);
    border-radius: .2rem;
}

.cd-cell {
    min-width: 0;
    padding: 1.3rem .75rem 1.15rem;
    text-align: center;
}

    .cd-cell:not(:last-child) {
        border-inline-end: 1px solid var(--countdown-separator);
    }

.cd-num {
    color: var(--countdown-accent);
    font-size: clamp(2rem, 4vw, 2.65rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    line-height: 1;
}

.cd-lab {
    margin-top: .85rem;
    color: var(--countdown-text);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .2em;
    line-height: 1.2;
    text-transform: uppercase;
}

.cd-complete {
    padding: 1.5rem;
    border: 1px solid var(--countdown-border);
    border-radius: .2rem;
    color: var(--countdown-accent);
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

    .cd-complete[hidden] {
        display: none;
    }

@media (max-width: 575.98px) {
    .dp-countdown-band {
        padding-block: 1.5rem 1.75rem;
    }

    .cd-label {
        margin-bottom: .85rem;
        font-size: .66rem;
        letter-spacing: .15em;
    }

    .cd-cell {
        padding: 1rem .2rem .9rem;
    }

    .cd-num {
        font-size: clamp(1.4rem, 8vw, 2rem);
    }

    .cd-lab {
        margin-top: .65rem;
        font-size: .5rem;
        letter-spacing: .07em;
    }
}

/* ---------- Sections ---------- */

.dp-section {
    padding-block: 3.25rem;
}

.dp-section-eyebrow {
    margin-bottom: .6rem;
    color: var(--portal-accent);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* The GMD band is a section in everything but its class, and its heading was left out
   of this rule: it kept the page's default near-black and Bootstrap's weight. */
.dp-section h2,
.dp-band h2 {
    margin-bottom: 1rem;
    color: var(--portal-accent-dark);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 700;
}

.dp-section-intro {
    color: #3f4f4d;
    font-size: 1.05rem;
    line-height: 1.75;
}

/* ---------- GMD band ---------- */

.dp-band {
    padding-block: 3.25rem;
    background: var(--portal-accent-light);
}

.dp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1.5rem;
    margin-block: 1.75rem;
}

.dp-stat-value {
    color: var(--portal-accent);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.dp-stat-label {
    margin-top: .4rem;
    color: #40514f;
    font-size: .9rem;
    line-height: 1.5;
}

/* ---------- Venue ---------- */

/* Linked to from the Resources page. The header is fixed, so the jump has to stop
   short of it or the eyebrow lands underneath. */
#venue {
    scroll-margin-top: 6rem;
}

/* Closing band of the page: it answers "where and when" once more, in the dark green
   of the hero, so the page opens and closes on the Forum. */
.dp-venue {
    padding-block: clamp(2.75rem, 2rem + 2.5vw, 4rem);
    background: var(--portal-accent-dark);
    color: #fff;
    /* The layout gutters the body top and bottom; the hero cancels the top one and this
       cancels the bottom, so the band meets the footer instead of leaving a white strip
       between two dark surfaces. The two are then parted by the same hairline the fact
       list is ruled with. */
    margin-bottom: -1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.dp-venue-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 2.25rem;
}

@media (min-width: 62em) {
    .dp-venue-inner {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: clamp(2.5rem, 1rem + 4vw, 5rem);
    }
}

.dp-venue-art {
    padding: 1.75rem 1.5rem 1.25rem;
    border-radius: .5rem;
    background: linear-gradient( 180deg, rgba(9, 43, 41, .9) 0%, rgba(15, 58, 55, .9) 100% );
}

    .dp-venue-art img {
        display: block;
        width: 100%;
        height: auto;
    }

.dp-venue .dp-section-eyebrow {
    color: var(--portal-gold);
}

.dp-venue h2 {
    margin-bottom: .9rem;
    color: #fff;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 700;
}

.dp-venue-intro {
    margin-bottom: 1.75rem;
    color: rgba(255, 255, 255, .85);
    font-size: 1.05rem;
    line-height: 1.75;
}

.dp-venue-facts {
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

    .dp-venue-facts > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .2rem 1.5rem;
        padding: .95rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, .16);
    }

@media (min-width: 36em) {
    .dp-venue-facts > div {
        grid-template-columns: 10rem minmax(0, 1fr);
    }
}

.dp-venue-facts dt {
    color: var(--portal-gold);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    align-self: center;
}

.dp-venue-facts dd {
    margin: 0;
    color: rgba(255, 255, 255, .9);
    line-height: 1.6;
}

    .dp-venue-facts dd a {
        color: #fff;
        text-decoration: underline;
        text-underline-offset: .2em;
    }

/* The event card is shared with the Events section and lives in site.css. */