/*
Theme Name:   SPC Plumbing
Theme URI:    https://spcplumbing.co.uk
Description:  Hello Elementor child theme for SPC Plumbing & Heating. Layout is built
              with Elementor Theme Builder; this child exists to hold custom CSS and
              any PHP overrides so they survive parent-theme updates.
Author:       LLOYDS iTC
Template:     hello-elementor
Version:      1.2.0
Text Domain:  spc-plumbing
*/

:root {
    --spc-gas-safe: #FFCC00;
    --spc-icon-size: 140px;
}

/* ---------------------------------------------------------------------------
   Service cards — home page grid and the /services/ archive.

   The service logos are icons, not photographs: 259x258px, and one is 128x127.
   Elementor's classic Posts skin stretches the thumbnail box to the full column
   width (~370px in a 3-up grid here) and lets the image fill it, upscaling these
   by around 2.5x — soft, and they dominate the card.

   SPECIFICITY NOTE — read before shortening these selectors.
   Elementor generates per-page CSS (post-<id>.css) that sets the width and the
   aspect ratio at FOUR classes of specificity:

     .elementor-21 .elementor-element.elementor-element-7b849a5 .elementor-post__thumbnail__link { width: 100% }
     .elementor-21 .elementor-element.elementor-element-7b849a5 ... .elementor-post__thumbnail   { padding-bottom: calc(66%) }

   A two-class selector loses to that no matter what order the sheets load in,
   which is why the obvious `.elementor-widget-posts .elementor-post__thumbnail__link`
   silently did nothing. The selectors below carry five classes (note
   `.elementor-posts.elementor-posts-container` doubling up on one element), so
   they win on specificity rather than needing !important — which would only make
   the next override harder.
   --------------------------------------------------------------------------- */
.elementor-widget-posts .elementor-posts.elementor-posts-container .elementor-post .elementor-post__thumbnail__link,
.elementor-widget-archive-posts .elementor-posts.elementor-posts-container .elementor-post .elementor-post__thumbnail__link {
    width: var(--spc-icon-size);
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 16px;
}

/* Square box to match the source icons, replacing Elementor's calc(66%). */
.elementor-widget-posts .elementor-posts.elementor-posts-container .elementor-post .elementor-post__thumbnail__link .elementor-post__thumbnail,
.elementor-widget-archive-posts .elementor-posts.elementor-posts-container .elementor-post .elementor-post__thumbnail__link .elementor-post__thumbnail {
    padding-bottom: 100%;
}

/* Flat icons on solid colour — cover has nothing useful to crop, and contain
   keeps the one odd-sized logo (128x127) undistorted. */
.elementor-widget-posts .elementor-post__thumbnail img,
.elementor-widget-archive-posts .elementor-post__thumbnail img {
    object-fit: contain;
}

/* A small centred icon over left-aligned text reads as lopsided; centre the card. */
.elementor-widget-posts .elementor-post__text,
.elementor-widget-archive-posts .elementor-post__text {
    text-align: center;
}

.elementor-widget-posts .elementor-post__read-more,
.elementor-widget-archive-posts .elementor-post__read-more {
    display: inline-block;
}

@media (max-width: 767px) {
    :root {
        --spc-icon-size: 120px;
    }
}