/* ==========================================================================
   ANAZ — About ANAZ / Chattayil section ("About Us" Elementor widget)
   Adapted from html/css/about-us.css. Requires assets/css/base.css.

   Class map: .about → .monks-about-us, .about__* → .monks-about-us__*,
   .about-card* → .monks-about-us-card*. Child rules are scoped under the
   section class so Elementor's `.elementor img` / `.elementor a` resets and
   kit typography never override the design. Elementor style controls use
   `{{WRAPPER}} …` selectors, which are always more specific.

   Layout
     ≥1024px  intro: text (left) + angular warehouse visual (right);
              three cards in one row.
     768–1023 intro stacks; cards 2 + 1 (an odd last card spans the row).
     <768px   everything stacks in a single column.
   Cards switch between a compact and a roomier layout with a container
   query, so each card adapts to its own width rather than the viewport.
   (The source CSS also styles a card image band / route line that the
   source HTML never renders; those unused rules are not carried over.)
   ========================================================================== */

.monks-about-us {
    /* Section-scoped tokens (values from the About design) */
    --monks-about-us-text: #465B74;
    --monks-about-us-border: #E1E8EF;
    --monks-about-us-bg: #F8FBFE;
    --monks-about-us-container: 1370px;
    --monks-about-us-card-radius: 22px;
    --monks-about-us-button-bg: #EEF3F8;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(64px, 8vw, 112px) 0 clamp(64px, 8vw, 104px);
    background:
        radial-gradient(70% 60% at 85% 0%, rgba(214, 228, 242, 0.55) 0%, rgba(214, 228, 242, 0) 70%),
        linear-gradient(180deg, var(--monks-about-us-bg) 0%, var(--anaz-white) 100%);
    color: var(--monks-about-us-text);
}

/* Faint white diagonal bands behind everything */
.monks-about-us::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(112deg, transparent 0 58%, rgba(255, 255, 255, 0.85) 58% 66%, transparent 66% 100%),
        linear-gradient(112deg, transparent 0 74%, rgba(231, 238, 246, 0.6) 74% 79%, transparent 79% 100%);
    pointer-events: none;
}

.monks-about-us .monks-about-us__inner {
    max-width: calc(var(--monks-about-us-container) + 2 * var(--anaz-gutter));
    margin: 0 auto;
    padding: 0 var(--anaz-gutter);
}

/* ---- Part A: introduction ---------------------------------------------- */

.monks-about-us .monks-about-us__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.monks-about-us .monks-about-us__content {
    position: relative;
    z-index: 2;
}

.monks-about-us .monks-about-us__eyebrow {
    display: flex;
    align-items: center;
    justify-content: var(--monks-about-us-justify, flex-start);
    gap: 18px;
    margin: 0 0 24px;
    color: var(--anaz-navy);
    font-family: var(--anaz-font);
    font-size: clamp(12px, 1vw, 15px);
    font-weight: 500;
    letter-spacing: 0.26em;
    line-height: 1.3;
    text-transform: uppercase;
}

.monks-about-us .monks-about-us__eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 38px;
    height: 2px;
    background: var(--anaz-orange);
}

.monks-about-us .monks-about-us__title {
    margin: 0 0 26px;
    color: var(--anaz-navy);
    font-family: var(--anaz-font);
    font-size: clamp(1.7rem, 10.4vw - 0.3rem, 3.4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

/* Each line masks its own reveal animation */
.monks-about-us .monks-about-us__title-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}

.monks-about-us .monks-about-us__title-inner {
    display: inline-block;
}

.monks-about-us .monks-about-us__title-line--accent {
    color: var(--anaz-orange);
}

.monks-about-us .monks-about-us__desc {
    max-width: 650px;
    margin: var(--monks-about-us-desc-margin, 0);
    color: inherit;
    font-family: var(--anaz-font);
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.65;
}

/* ---- Angular warehouse visual ----------------------------------------- */

.monks-about-us .monks-about-us__visual {
    position: relative;
    aspect-ratio: 16 / 10;
    margin-right: calc(-1 * var(--anaz-gutter));
}

/* Every shape covers the visual box and is cut with clip-path, so all
   diagonals share one coordinate space and stay parallel at any size. */
.monks-about-us .monks-about-us__shape,
.monks-about-us .monks-about-us__photo {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
}

.monks-about-us .monks-about-us__shape--band {
    z-index: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(231, 238, 246, 0.7));
    clip-path: polygon(14% 4%, 100% 4%, 76% 100%, 0% 100%);
}

/* Navy block peeking out above the photo's upper-right edge */
.monks-about-us .monks-about-us__shape--navy {
    z-index: 1;
    background: linear-gradient(160deg, var(--anaz-navy) 0%, var(--anaz-navy-dark) 100%);
    clip-path: polygon(64% 0, 94% 0, 86.8% 30%, 56.8% 30%);
}

.monks-about-us .monks-about-us__photo {
    z-index: 2;
    overflow: hidden;
    clip-path: polygon(24% 0, 86% 0, 62% 100%, 0% 100%);
    background: linear-gradient(135deg, #D7E2EC, #F2F6FA); /* shown if the photo fails */
}

.monks-about-us .monks-about-us__photo img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    object-fit: cover;
    object-position: var(--monks-about-us-img-x, 58%) var(--monks-about-us-img-y, 62%);
}

/* Overlays: warm glow lower-left + white fade toward the text column */
.monks-about-us .monks-about-us__photo::before,
.monks-about-us .monks-about-us__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.monks-about-us .monks-about-us__photo::before {
    background: radial-gradient(55% 60% at 12% 92%, rgba(255, 138, 36, 0.42) 0%, rgba(255, 138, 36, 0) 70%);
    mix-blend-mode: soft-light;
}

.monks-about-us .monks-about-us__photo::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 30%);
}

/* Slim orange strip parallel to the photo's right edge */
.monks-about-us .monks-about-us__shape--orange {
    z-index: 3;
    background: linear-gradient(180deg, var(--anaz-orange-light) 0%, var(--anaz-orange) 55%, rgba(255, 101, 0, 0.15) 100%);
    clip-path: polygon(93% 10%, 98.5% 10%, 80.3% 86%, 74.8% 86%);
}

/* ---- Part B: cards ----------------------------------------------------- */

.monks-about-us .monks-about-us__cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin: clamp(32px, 4vw, 48px) 0 0;
    padding: 0;
    list-style: none;
}

.monks-about-us .monks-about-us-card {
    container-type: inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--monks-about-us-border);
    border-radius: var(--monks-about-us-card-radius);
    background: var(--anaz-white);
    box-shadow: 0 18px 40px rgba(11, 45, 73, 0.06);
    transition: box-shadow 0.4s ease;
}

.monks-about-us .monks-about-us-card:hover {
    box-shadow: 0 24px 50px rgba(11, 45, 73, 0.11);
}

.monks-about-us .monks-about-us-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 28px 28px;
}

.monks-about-us .monks-about-us-card__num {
    display: block;
    color: var(--anaz-navy);
    font-family: var(--anaz-font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* Short orange line under the number; grows on hover */
.monks-about-us .monks-about-us-card__num::after {
    content: "";
    display: block;
    width: 34px;
    height: 2.5px;
    margin-top: 10px;
    background: var(--anaz-orange);
    transition: width 0.4s var(--anaz-ease);
}

.monks-about-us .monks-about-us-card:hover .monks-about-us-card__num::after {
    width: 56px;
}

.monks-about-us .monks-about-us-card__title {
    margin: 22px 0 12px;
    color: var(--anaz-navy);
    font-family: var(--anaz-font);
    font-size: clamp(21px, 1.7vw, 26px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.monks-about-us .monks-about-us-card__text {
    margin: 0 0 24px;
    color: inherit;
    font-family: var(--anaz-font);
    font-size: 15px;
    line-height: 1.6;
}

.monks-about-us .monks-about-us-card__link {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-top: auto;
    border-radius: 50%;
    background: var(--monks-about-us-button-bg);
    color: var(--anaz-navy);
    box-shadow: none;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.monks-about-us .monks-about-us-card__icon {
    display: grid;
    place-items: center;
    line-height: 1;
    transition: transform 0.35s var(--anaz-ease);
}

/* Icons chosen from Elementor's icon library */
.monks-about-us .monks-about-us-card__icon i {
    font-size: 20px;
}

.monks-about-us .monks-about-us-card__icon svg:not([width]) {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.monks-about-us .monks-about-us-card__link:hover,
.monks-about-us .monks-about-us-card:hover .monks-about-us-card__link {
    background: var(--anaz-peach);
    color: var(--anaz-orange);
}

.monks-about-us .monks-about-us-card__link:hover .monks-about-us-card__icon,
.monks-about-us .monks-about-us-card:hover .monks-about-us-card__icon {
    transform: translateX(4px);
}

.monks-about-us .monks-about-us-card__link:focus-visible {
    outline: none;
    box-shadow: var(--anaz-focus);
}

/* Roomier card layout once the card itself is wide enough */
@container (min-width: 360px) {
    .monks-about-us .monks-about-us-card__body {
        min-height: 300px;
        padding: 34px 32px 32px;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 768px) {
    .monks-about-us .monks-about-us__title {
        font-size: clamp(3.2rem, 7.4vw, 4.2rem);
    }

    .monks-about-us .monks-about-us__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Source: the third of three cards spans the row; generalised to any
       odd last card so added/removed cards never leave a gap. */
    .monks-about-us .monks-about-us-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .monks-about-us .monks-about-us__intro {
        /* Source: 53fr 47fr — identical while the gap is the default 0 */
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--monks-about-us-visual-col, 47%));
        gap: 0;
    }

    .monks-about-us .monks-about-us__title {
        font-size: clamp(2.9rem, 0.5rem + 3.9vw, 4.6rem);
    }

    /* Visual widens leftwards under the fade and bleeds to the right edge */
    .monks-about-us .monks-about-us__visual {
        aspect-ratio: auto;
        height: clamp(360px, 31vw, 500px);
    }

    .monks-about-us .monks-about-us__cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(16px, 1.6vw, 26px);
    }

    .monks-about-us .monks-about-us-card:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

@media (min-width: 1280px) {
    .monks-about-us .monks-about-us__visual {
        margin-left: -12%;
    }
}

@media (max-width: 767px) {
    .monks-about-us .monks-about-us__visual {
        margin-left: calc(-1 * var(--anaz-gutter));
    }
}