/* Aazad Caterers (pId 68186) — home page overrides.
   Auto-loaded on the widget home (content-view basename `home`), after any
   brand-wide 68186.css. Every selector is scoped under .azad-cau so nothing
   leaks to other pages or brands.

   Accent colour: the brand primary (#ffaa35) is a light orange that doesn't
   hold contrast on the pink band, so the collage heading uses the same deep
   rose the brand already runs in its header (web_config.header_font_color).
   One variable, one place to change it.

   Layout note: the source images are square (600–900px), so the two right-hand
   slots are cropped to 3:2 and the left panel stretches to the column height —
   that reproduces the reference proportions without the right column
   outgrowing the left one. */

.azad-cau {
    --azad-accent: #ab2648;
}

.azad-cau__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--s-4, 16px);
}

.azad-cau__title {
    font-family: var(--font-display, inherit);
    font-size: var(--fs-24, 1.5rem);
    font-weight: var(--fw-bold, 700);
    line-height: var(--lh-tight, 1.2);
    letter-spacing: -.01em;
    color: var(--fg-1, #201c1d);
    margin: 0 0 var(--s-3, 12px);
}

.azad-cau__accent {
    color: var(--azad-accent);
}

.azad-cau__text,
.azad-cau__html p {
    font-size: var(--fs-16, 1rem);
    line-height: var(--lh-body, 1.5);
    color: var(--fg-3, #666);
    margin: 0 0 var(--s-5, 20px);
}

.azad-cau__html p:last-child {
    margin-bottom: 0;
}

.azad-cau__cta {
    align-self: flex-start;
    display: inline-flex;
    padding: var(--s-3, 12px) var(--s-6, 24px);
    border-radius: var(--r-pill, 999px);
    background: var(--brand-primary);
    color: var(--brand-on-primary, #fff);
    font-size: var(--fs-14, .875rem);
    font-weight: var(--fw-semibold, 600);
    letter-spacing: .04em;
    text-decoration: none;
    transition: filter var(--dur-2, 200ms) var(--ease-out, ease),
                transform var(--dur-2, 200ms) var(--ease-out, ease);
}

.azad-cau__cta:hover {
    color: var(--brand-on-primary, #fff);
    filter: brightness(.92);
    transform: translateY(-2px);
}

.azad-cau__cta:focus-visible {
    outline: 2px solid var(--azad-accent);
    outline-offset: 3px;
}

/* ── Collage (exactly 3 images) ───────────────────────────────────────
   Mobile: heading first, then the three images stacked. */
.azad-cau__collage {
    display: flex;
    flex-direction: column;
    gap: var(--s-4, 16px);
}

.azad-cau__head {
    order: -1;
    text-align: center;
}

.azad-cau__head .azad-cau__cta {
    align-self: center;
}

.azad-cau__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-4, 16px);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, .12));
}

/* ── Grid fallback (2 or 4+ images) ──────────────────────────────────── */
.azad-cau--grid {
    text-align: center;
}

.azad-cau__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3, 12px);
}

.azad-cau__grid img,
.azad-cau__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-4, 16px);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, .12));
}

.azad-cau__grid img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.azad-cau__foot {
    margin-top: var(--s-6, 24px);
}

.azad-cau__foot .azad-cau__text {
    max-width: 760px;
    margin: 0 auto var(--s-5, 20px);
}

/* ── Single image / text-only bands ──────────────────────────────────── */
.azad-cau--single .azad-cau__media {
    margin-bottom: var(--s-5, 20px);
}

.azad-cau--plain {
    text-align: center;
}

.azad-cau--plain .azad-cau__text,
.azad-cau--plain .azad-cau__html {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.azad-cau--plain .azad-cau__cta,
.azad-cau--grid .azad-cau__cta {
    align-self: center;
}

/* ── Desktop ─────────────────────────────────────────────────────────
   Big panel left (full column height), the other two crops stacked to its
   right with the heading vertically centred between them. */
@media (width >= 768px) {
    .azad-cau__title {
        font-size: var(--fs-28, 1.75rem);
    }

    .azad-cau__collage {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        grid-template-rows: 1fr auto 1fr;
        grid-template-areas:
            "a b"
            "a head"
            "a c";
        gap: var(--s-5, 20px);
        align-items: center;
    }

    .azad-cau__img--a {
        grid-area: a;
        align-self: stretch;
        aspect-ratio: auto;
        height: 100%;
    }

    .azad-cau__img--b {
        grid-area: b;
        aspect-ratio: 3 / 2;
    }

    .azad-cau__img--c {
        grid-area: c;
        aspect-ratio: 3 / 2;
    }

    .azad-cau__head {
        grid-area: head;
        order: 0;
        padding: var(--s-4, 16px) var(--s-2, 8px);
    }

    .azad-cau__head .azad-cau__title {
        font-size: var(--fs-32, 2rem);
        margin-bottom: 0;
    }

    .azad-cau__head .azad-cau__text {
        margin-top: var(--s-3, 12px);
        margin-bottom: 0;
    }

    .azad-cau__head .azad-cau__cta {
        margin-top: var(--s-4, 16px);
    }

    .azad-cau--grid .azad-cau__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .azad-cau--single .azad-cau__inner {
        display: flex;
        align-items: center;
        gap: var(--s-10, 40px);
    }

    .azad-cau--single .azad-cau__media,
    .azad-cau--single .azad-cau__body {
        flex: 1 1 0;
        min-width: 0;
    }

    .azad-cau--single .azad-cau__media {
        margin-bottom: 0;
    }

    .azad-cau--single .azad-cau__body {
        display: flex;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .azad-cau__cta {
        transition: none;
    }

    .azad-cau__cta:hover {
        transform: none;
    }
}