/* ==========================================================================
   Edy London: Services archive (archive-services.php)
   Grid layout for the service cards. The card look itself comes from
   assets/css/services-slider.css (.el-service-card*), shared with the
   front page slider. The hero uses the existing .el-page-hero styles.
   Breakpoints: tablet 1024px, mobile 767px.
   ========================================================================== */

/* ---------- Same breadcrumb height and hero height on every hero (all
   pages except the front page): the hero text starts at the top,
   --el-hero-top below the header, and on desktop the hero is at least
   --el-hero-height tall (the height of the single service hero). The
   blog page hero (text only) keeps its own height. Used by .el-page-hero
   (here), .el-hv-hero (home-visit.css), .el-blog-hero (blog.css, top
   offset only) and .el-post-hero (blog-single.css). */
:root {
    --el-hero-top: clamp(56px, 7vw, 112px);
    --el-hero-height: 788px;
}

.el-page-hero .el-wrap {
    align-items: start;
    padding-top: var(--el-hero-top);
}

@media (min-width: 901px) {
    .el-page-hero:not(.el-service-hero) {
        min-height: var(--el-hero-height);
    }
}

/* ---------- Breadcrumb (hero). Size, colour and spacing come from the
   existing .el-crumbs rules in edy.css; this only lays out the list. */
.el-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0;
    padding: 0;
    list-style: none;
}

.el-crumbs__item + .el-crumbs__item::before {
    content: "/";
    margin: 0 .35em;
    color: var(--el-text);
}

.el-crumbs__item [aria-current="page"] {
    color: var(--el-text);
}

/* ---------- Hero image about 30% larger than in edy.css.
   Desktop: columns 6fr / 7fr instead of 7fr / 5fr (image column ~+29%).
   900px and below: image under the text, max 546px instead of 420px. */
@media (min-width: 901px) {
    .el-page-hero .el-wrap {
        grid-template-columns: 6fr 7fr;
    }
}

@media (max-width: 900px) {
    .el-page-hero__img {
        max-width: 546px;
    }
}

/* ---------- Service cards grid */
.el-services-grid__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- Tablet: two columns */
@media (max-width: 1024px) {
    .el-services-grid__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

/* ---------- Mobile: one column */
@media (max-width: 767px) {
    .el-services-grid__list {
        grid-template-columns: minmax(0, 1fr);
        max-width: 420px;
        margin-inline: auto;
        gap: 20px;
    }
}