/* Delivery — full-bleed photo banner with a floating quote, the centred
   intro heading, the eight travel-care cards, two trust highlights and the
   closing WhatsApp bar.

   This page runs a deeper forest green for the card titles and a warmer
   pink than the site's default tokens, so the palette is declared as custom
   properties on the .del wrapper (delivery.php) rather than reaching for the
   global ones — that keeps it to this page. Type is the site's own: Manrope
   throughout, Parisienne for the script accent. */

.del {
    --del-heading: #24242a;
    --del-text:    #63636a;
    --del-green:   #5d7f4b; /* card + highlight titles */
    --del-pink:    #ef4b8b; /* quote lead, script accent, buttons */
    --del-pink-mid:#f5709f;
    --del-card:    #fdf8f5;
    --del-line:    #f2e6e0;
    --del-well:    #eef3ea; /* icon discs */
    --del-bar:     #fdeaf1; /* closing CTA bar */
}

/* ── Photo + quote banner ───────────────────────────────────────────────── */
/* Runs up behind the fixed header the way .page-hero does on every other
   inner page (main.css) — body's top padding would otherwise cut the photo
   off and leave a white strip around the floating header. */
.del-hero {
    --del-header-space: calc(var(--topbar-height) + var(--header-height) + var(--header-offset));

    margin-top: calc(-1 * var(--del-header-space));
}

/* The upload is a wide cutout (roughly 16:9) with the subject sitting in the
   left third and a lot of empty canvas above them — fine on desktop, where
   the banner's own box stays wider than that even with a long quote, so
   background-size:cover always crops to fit its width and only trims the
   excess height. background-position: left (rather than center) keeps the
   subject anchored to the visible edge instead of centering that empty span
   with it. */
.del-hero__banner {
    display:     flex;
    align-items: center;
    min-height:  calc(430px + var(--del-header-space));
    padding:     calc(var(--del-header-space) + 24px) 0 40px;
    background:  var(--del-hero-bg, linear-gradient(120deg, #fdeef2 0%, #fbe4ec 100%)) left center / cover no-repeat;
}

/* Sits in the right half, clear of the photo's subject on the left */
.del-hero__quote {
    position:      relative;
    width:         min(640px, 52%);
    margin-left:   auto;
    padding:       34px 54px 38px 46px;
    border-radius: 22px;
    background:    rgba(255, 255, 255, 0.95);
    box-shadow:    0 10px 34px rgba(90, 40, 60, 0.12);
}
/* Tail, pointing back at the photo */
.del-hero__quote::before {
    content:      '';
    position:     absolute;
    top:          62px;
    left:         -17px;
    border-style: solid;
    border-width: 13px 18px 13px 0;
    border-color: transparent rgba(255, 255, 255, 0.95) transparent transparent;
}

.del-hero__mark {
    position:    absolute;
    font-family: Georgia, 'Times New Roman', serif;
    font-size:   46px;
    line-height: 1;
    color:       var(--del-pink);
}
.del-hero__mark--open  { top: 26px; left: 18px; }
.del-hero__mark--close { bottom: 8px; right: 20px; }

.del-hero__lead {
    margin:      0 0 12px;
    font-size:   18px;
    line-height: 27px;
    font-weight: 700;
    color:       var(--del-pink);
}

.del-hero__text { font-size: 15px; line-height: 26px; color: var(--del-heading); }
.del-hero__text p { margin: 0 0 10px; }
.del-hero__text p:last-child { margin-bottom: 0; }

/* ── Intro heading ───────────────────────────────────────────────────────── */
.del-intro { padding: 44px 0 0; text-align: center; }

.del-intro__eyebrow {
    margin:         0 0 8px;
    font-size:      13px;
    line-height:    20px;
    font-weight:    600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          var(--del-heading);
}

.del-intro__title {
    margin:      0;
    font-size:   40px;
    line-height: 52px;
    font-weight: 400;
    color:       var(--del-heading);
}
/* .accent is the site-wide Parisienne span (main.css) — only the colour
   changes here, to this page's warmer pink */
.del-intro__title .accent { color: var(--del-pink); font-size: 46px; }

/* Line — paw — line, the reference's divider under the heading */
.del-intro__rule {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    margin:          6px 0 10px;
    color:           var(--del-pink-mid);
}
.del-intro__rule span {
    width:      74px;
    height:     1px;
    background: var(--del-line);
}

.del-intro__subtitle {
    max-width:   620px;
    margin:      0 auto;
    font-size:   15px;
    line-height: 24px;
    color:       var(--del-text);
}

/* ── Info grid ───────────────────────────────────────────────────────────── */
.del-grid { padding: 26px 0 0; }

.del-grid__list {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   18px;
    align-items:           stretch;
}

.del-grid__card {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    padding:        14px 14px 20px;
    border:         1px solid var(--del-line);
    border-radius:  16px;
    background:     var(--del-card);
}

.del-grid__media {
    border-radius: 12px;
    overflow:      hidden;
}
.del-grid__media img {
    display:    block;
    width:      100%;
    height:     104px;
    object-fit: cover;
}

/* Icon beside the copy rather than stacked above it */
.del-grid__body {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
}
.del-grid__icon {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      var(--del-well);
    color:           var(--del-green);
}
.del-grid__content { min-width: 0; }

.del-grid__title {
    margin:      0 0 5px;
    font-size:   15px;
    line-height: 21px;
    font-weight: 600;
    color:       var(--del-green);
}

.del-grid__text { font-size: 12px; line-height: 18px; color: var(--del-text); }
.del-grid__text p { margin: 0 0 8px; }
.del-grid__text p:last-child { margin-bottom: 0; }

/* ── Highlights ──────────────────────────────────────────────────────────── */
.del-highlights { padding: 18px 0 0; }

.del-highlights__grid {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   18px;
}

.del-highlights__item {
    display:       flex;
    align-items:   center;
    gap:           18px;
    padding:       20px 26px;
    border:        1px solid var(--del-line);
    border-radius: 16px;
    background:    var(--del-card);
}

.del-highlights__icon {
    flex-shrink: 0;
    display:     flex;
    color:       var(--del-pink-mid);
}
.del-highlights__icon .icon { width: 40px; height: 40px; }

.del-highlights__body { min-width: 0; }
.del-highlights__title {
    margin:      0 0 4px;
    font-size:   16px;
    line-height: 22px;
    font-weight: 600;
    color:       var(--del-green);
}
.del-highlights__text { margin: 0; font-size: 13px; line-height: 20px; color: var(--del-text); }

/* ── Closing CTA bar ─────────────────────────────────────────────────────── */
.del-cta { padding: 18px 0 70px; }

.del-cta__bar {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             22px;
    flex-wrap:       wrap;
    padding:         20px 28px;
    border-radius:   16px;
    background:      var(--color-green-100);
}

.del-cta__lead { display: flex; align-items: center; gap: 14px; }
.del-cta__icon { flex-shrink: 0; display: flex; }

.del-cta__text {
    margin:      0;
    font-size:   16px;
    line-height: 24px;
    font-weight: 600;
    color:       var(--del-heading);
}

.del-cta__btn {
    display:      inline-flex;
    align-items:  center;
    gap:          8px;
    flex-shrink:  0;
    height:       44px;
    padding:      0 22px;
    font-size:    14px;
    background:   var(--color-whatsapp);
    border-color: var(--color-whatsapp);
    box-shadow:   none;
}
.del-cta__btn:hover { background: #0aa338; border-color: #0aa338; }

/* ── Delivery options ─────────────────────────────────────────────────────── */
/* Same icon-disc / title / text / bottom-photo card as the home page's
   "What Sets Us Apart" (.adv-card, css/pages/home.css) — rebuilt with its
   own classes rather than reused directly, so it can run this page's rose
   palette instead of the site's candy pink. */
.del-options { padding: 50px 0 80px; }

.del-options__title {
    margin:      0;
    font-size:   32px;
    line-height: 40px;
    font-weight: 500;
    text-align:  center;
    color:       var(--del-heading);
}
.del-options__title-accent {
    font-family: Georgia, 'Times New Roman', serif;
    font-style:  italic;
    color:       var(--del-pink);
}

.del-options__list {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   20px;
    margin:                34px 0 0;
    padding:               0;
    list-style:            none;
}

.del-option {
    display:        flex;
    flex-direction: column;
    gap:             10px;
    padding:        24px 22px 0;
    border:         1px solid var(--del-line);
    border-radius:  16px;
    background:     var(--del-card);
    overflow:       hidden;
}

.del-option__icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           50px;
    height:          50px;
    border-radius:   50%;
    background:      var(--del-bar);
    color:           var(--del-pink);
}

.del-option__title {
    margin:         0;
    font-size:      14px;
    line-height:    19px;
    font-weight:    700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color:          var(--del-heading);
}
.del-option__subtitle {
    display:     block;
    margin-top:  2px;
    font-size:   11px;
    font-weight: 700;
    color:       var(--del-pink);
}

.del-option__text {
    font-size:   12.5px;
    line-height: 19px;
    color:       var(--del-text);
}
.del-option__text p { margin: 0 0 10px; }
.del-option__text p:last-child { margin-bottom: 0; }

/* Pushed to the bottom so cards of different text lengths still line their
   photos up along one edge */
.del-option__media {
    display:     block;
    width:       calc(100% + 44px);
    margin:      auto -22px 0;
    padding-top: 14px;
}
.del-option__media img {
    display:    block;
    width:      100%;
    height:     150px;
    object-fit: cover;
}

/* ── Laptop ──────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .del-grid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .del-hero__quote { width: min(560px, 58%); }
    .del-options__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* The photo's subject no longer has room beside a floating card, so the
       quote drops below it and the banner keeps the photo on top.

       The quote's own text now drives the banner's height instead of a fixed
       min-height (a long quote can run the banner well past it), which on a
       ~16:9 photo flips background-size:cover from cropping height (fine) to
       stretching the whole image — including the empty canvas above the
       subject — down the entire banner, leaving mostly blank space where the
       photo should be. Moving the photo to a ::before capped at a fixed
       140px keeps its own box comfortably wider than the photo regardless of
       how tall the quote makes the banner, so cover always crops it the
       intended way. */
    .del-hero__banner {
        position:    relative;
        align-items: flex-end;
        min-height:  calc(440px + var(--del-header-space));
        padding:     calc(var(--del-header-space) + 220px) 0 24px;
        background:  linear-gradient(120deg, #fdeef2 0%, #fbe4ec 100%);
        overflow:    hidden;
    }
    .del-hero__banner::before {
        content:    '';
        position:   absolute;
        top:        var(--del-header-space);
        left:       0;
        right:      0;
        height:     220px;
        background: var(--del-hero-bg, transparent) 0% 64% / cover no-repeat;
    }
    .del-hero__quote {
        position:    relative;
        z-index:     1;
        width:       100%;
        margin-left: 0;
        padding:     28px 40px 30px 38px;
    }
    .del-hero__quote::before { display: none; }

    .del-intro { padding-top: 32px; }
    .del-intro__title { font-size: 32px; line-height: 42px; }
    .del-intro__title .accent { font-size: 36px; }

    .del-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The fixed 104px/150px heights were sized for the 3-4 column desktop
       row; at 2 columns the same cards are much wider, so cover cropped
       them down to a sliver. aspect-ratio keeps the crop proportional to
       whatever width the column actually ends up at. */
    .del-grid__media img { height: auto; aspect-ratio: 2 / 1; }

    .del-cta { padding-bottom: 50px; }

    .del-options { padding: 40px 0 60px; }
    .del-options__title { font-size: 27px; line-height: 35px; }
    .del-option__media img { height: auto; aspect-ratio: 16 / 9; }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .del-hero__banner {
        min-height: calc(350px + var(--del-header-space));
        padding:    calc(var(--del-header-space) + 180px) 0 18px;
    }
    .del-hero__banner::before { height: 180px; }
    .del-hero__quote { padding: 24px 24px 26px 28px; border-radius: 18px; }
    .del-hero__mark { font-size: 34px; }
    .del-hero__mark--open { top: 18px; left: 10px; }
    .del-hero__mark--close { bottom: 4px; right: 12px; }
    .del-hero__lead { font-size: 16px; line-height: 24px; }
    .del-hero__text { font-size: 14px; line-height: 23px; }

    .del-intro { padding-top: 26px; }
    .del-intro__eyebrow { font-size: 12px; letter-spacing: 0.12em; }
    .del-intro__title { font-size: 25px; line-height: 33px; }
    .del-intro__title .accent { font-size: 29px; }
    .del-intro__rule span { width: 46px; }

    .del-grid__list { grid-template-columns: minmax(0, 1fr); }
    /* Full-width single column now — same reasoning as the tablet rule
       above, just a taller ratio since there's no second card competing
       for width any more. */
    .del-grid__media img { height: auto; aspect-ratio: 16 / 9; }

    .del-highlights__grid { grid-template-columns: minmax(0, 1fr); }
    .del-highlights__item { padding: 18px 20px; gap: 14px; }

    .del-cta { padding-bottom: 40px; }
    .del-cta__bar { flex-direction: column; text-align: center; gap: 16px; }
    .del-cta__lead { flex-direction: column; }
    .del-cta__btn { width: 100%; justify-content: center; }

    .del-options { padding: 30px 0 50px; }
    .del-options__title { font-size: 22px; line-height: 29px; }
    .del-options__list { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 24px; }
    .del-option__media img { height: auto; aspect-ratio: 4 / 3; }
}