/*---------------------------------------------
  EHU Icons Block
-----------------------------------------------*/
.ehu-icons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 2rem;
}

/* Coloured square */
.ehu-icons__hero {
    position: relative;
    width: 150px;
    height: 160px;
}

/* Title label: above-left, overlapping outside the square */
.ehu-icons__label-above {
    position: absolute;
    top: 0.75rem;
    left: -1.5rem;
    font-weight: var(--ehu-font-weight-semibold, 600);
    font-size: var(--ehu-font-size-base, 1rem);
    line-height: 1.2;
    margin: 0;
    z-index: 2;
    max-width: 98%;
}

/* SVG icon: offset right, hanging below the square */
.ehu-icons__svg {
    position: absolute;
    width: 78%;
    height: auto;
    left: 30%;
    top: 46%;
    transform: translateX(-60%);
    z-index: 1;
}

/* Body text area below */
.ehu-icons__body {
    padding-top: 2.75rem;
    text-align: left;
    max-width: 200px;
    position: relative;
    left: -1.25rem;
}

.ehu-icons__text {
    font-size: var(--ehu-font-size-sm, 0.875rem);
    font-weight: var(--ehu-font-weight-regular, 400);
    line-height: var(--ehu-line-height-tight, 1.25);
    margin: 0 0 0.5rem;
}

/* Responsive */
@media (max-width: 480px) {
    .ehu-icons__body {
        width: 100%;
    }
}

/*---------------------------------------------
  Stretched style: above the breakpoint the
  colour fills the whole block, with the icon
  on the left and the title and body stacked to
  its right. Below it, Stretched falls back to
  the Default look, which the base rules above
  already provide. Scoped to the modifier
  throughout - ehu-stacking-cards reuses the
  base .ehu-icons__hero / __svg rules verbatim.
-----------------------------------------------*/

/* render_output() publishes the colour as --ehu-icons-bg on the block rather than
   painting it, so each layout can put it where it belongs. */
.ehu-icons--stretched .ehu-icons__hero {
    background-color: var(--ehu-icons-bg);
}

@media (min-width: 601px) {
    .ehu-icons--stretched {
        flex-direction: row;
        align-items: center;
        gap: 0;
        max-width: 90%;
        /* The icon breaks out past the left edge, hence no padding there. */
        padding: 0 2rem 0 0;
        background-color: var(--ehu-icons-bg);
    }

    /* The band carries the colour now, so the square is only the icon's box. */
    .ehu-icons--stretched .ehu-icons__hero {
        flex: 0 0 100px;
        width: 100%;
        background-color: transparent;
    }

    /* Breaks out to the left of the band, the way Default breaks out of its
       square. The base rule's translateX would stack with this, so it is cleared. */
    .ehu-icons--stretched .ehu-icons__svg {
        left: -36%;
        top: 18%;
        width: 100%;
        transform: none;
    }

    /* Here the title is a sibling of the body rather than a child of the square,
       so it drops the absolute offset it uses in Default. */
    .ehu-icons--stretched .ehu-icons__label-above {
        position: static;
        max-width: none;
        margin-bottom: 0.75rem;
    }

    /* Nothing overhangs into the body once it sits beside the square. */
    .ehu-icons--stretched .ehu-icons__body {
        padding-top: 0;
        left: 0;
        max-width: 32ch;
    }
}

/* Down here Stretched keeps the Default look but sits two to a row. The title is
   the one piece that needs placing: Default's sits inside the square, but
   Stretched renders it alongside the body, so it is positioned against the block
   instead - which, with no top padding, puts it at the same 0.75rem the base rule
   already gives it. */
@media (max-width: 600px) {
    .ehu-icons--stretched {
        position: relative;
        /* inline-block so consecutive blocks share a line. The 0.5rem off the half
           covers the whitespace between two inline-blocks, which would otherwise
           push the second one onto a row of its own. */
        display: inline-block;
        vertical-align: top;
        width: calc(50% - 0.5rem);
        max-width: 90%;
        padding: 0 0 0 0.75rem;
    }

    /* The square's fixed 150px is wider than a column on the narrowest screens,
       where it would run into its neighbour. */
    .ehu-icons--stretched .ehu-icons__hero {
        max-width: 100%;
    }

    /* A block on its own in its container - one per wp-block-column, say, which
       core stacks to full width at 781px - has no sibling to pair with, so
       half-width would just strand it against the left edge. It sizes to its
       content and centres instead. The wider left padding keeps the title and the
       icon's overhang inside the block, so that centring reads true. */
    .ehu-icons--stretched:only-child {
        display: block;
        /* The body's own 200px cap plus this padding, rather than shrink-to-fit:
           a fixed width means two stacked blocks centre on the same axis instead
           of each centring to its own line length. */
        width: calc(200px + 1.5rem);
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.5rem;
    }
}

/*---------------------------------------------
  Optional centring, applied per page rather
  than globally: put ehu-icons-centred in the
  Additional CSS class(es) field - on a Group
  wrapping the icons to centre the set, or on a
  single block to centre that one. Two
  mechanisms are needed: the mobile columns are
  inline-block, so it is the parent's
  text-align that places them, while the
  desktop band is a block and takes auto
  margins.
-----------------------------------------------*/
.ehu-icons-centred {
    text-align: center;
}

/* The centring must not cascade into the copy, which stays left-aligned. */
.ehu-icons-centred .ehu-icons,
.ehu-icons--stretched.ehu-icons-centred {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}