/* ============================================
   Park.dog — Services Page CSS
   Owns: service-row gradient/image blocks, photo radius.
   Edit this file for services-page changes; other
   Claudes can work on css/*.css in parallel without
   touching style.css.
   ============================================ */

/* ---- Service image container — holds the 340x240 box; Elementor's
   width controls don't reliably emit CSS for containers, so we pin it here. */
.parkdog-service-img {
    width: 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;
    min-height: 240px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
}

/* ---- Service photo — the image widget inside .parkdog-service-img.
   Border-radius lives on the image so swapping the placeholder for a real
   photo doesn't leave a coloured backdrop showing around it. */
.parkdog-service-photo,
.parkdog-service-photo .elementor-widget-container,
.parkdog-service-photo img {
    width: 100% !important;
    height: 100% !important;
    min-height: 240px;
    border-radius: 20px !important;
    overflow: hidden;
    object-fit: cover;
}

/* ============================================================
   RESPONSIVE — tablet (≤1024) and mobile (≤767).
   The fixed 340px service-img width can't fit beside content
   below ~900px, so we release the lock and let the image either
   span half the row (tablet) or sit above the text (mobile).
   ============================================================ */

/* ---- Tablet (≤1024px) ---- */
@media (max-width: 1024px) {
    .parkdog-service-img {
        width: 50% !important;
        min-width: 0 !important;
        max-width: 50% !important;
        min-height: 220px !important;
    }
    .parkdog-service-photo,
    .parkdog-service-photo .elementor-widget-container,
    .parkdog-service-photo img { min-height: 220px; }
}

/* ---- Mobile (≤767px) ---- */
@media (max-width: 767px) {
    /* Each service row stacks: image on top, text below */
    .parkdog-service-img {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 180px !important;
    }
    .parkdog-service-photo,
    .parkdog-service-photo .elementor-widget-container,
    .parkdog-service-photo img { min-height: 180px; }

    /* Service row headings tighter */
    .page-id-40 .elementor-widget-heading h3 { font-size: 18px !important; }
    .page-id-40 .elementor-widget-heading h2 { font-size: 26px !important; line-height: 1.2 !important; }
    .parkdog-page-header { padding: 40px 24px !important; }
}