/* mod_homeblocks - row layout and presentation.
   Colour tokens (--hwd-heading / --hwd-text), the 'Manrope' face and the
   .hwd-btn button styles are supplied by the site template. */
.hwd-homeblocks{width:min(1200px,100%);margin-inline:auto}
.hwd-homeblocks .hwd-feature-row{
  --media-column:2;
  --content-column:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(48px,8vw,110px);
  align-items:center;
  min-height:460px;
  padding:55px 0;
  color:var(--hwd-heading);
}
.hwd-feature-row:nth-child(even){--media-column:1;--content-column:2}
.hwd-homeblocks--all-left .hwd-feature-row{--media-column:2;--content-column:1}
.hwd-homeblocks--all-right .hwd-feature-row{--media-column:1;--content-column:2}
.hwd-homeblocks .hwd-feature-row--no-image{--content-column:1;grid-template-columns:minmax(0,1fr);min-height:0}
.hwd-homeblocks .hwd-feature-row__media{
  grid-column:var(--media-column);
  grid-row:1;
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:center;
}
/* Image alignment inside its own column - independent of the text alignment. */
.hwd-homeblocks .hwd-feature-row__media--left{justify-content:flex-start}
.hwd-homeblocks .hwd-feature-row__media--center{justify-content:center}
.hwd-homeblocks .hwd-feature-row__media--right{justify-content:flex-end}
.hwd-homeblocks .hwd-feature-row__content{grid-column:var(--content-column);grid-row:1;min-width:0}
/* Sized from the width, with the aspect ratio the width/height attributes
   supply, so the row reserves the image's box before the file loads (no
   layout shift). `width:auto` would discard that box until load. */
.hwd-homeblocks .hwd-feature-row__image{
  display:block;
  width:min(100%,476px);
  height:auto;
  max-height:390px;
  object-fit:contain;
  transition:transform .35s cubic-bezier(.2,1,.3,1);
}
.hwd-homeblocks .hwd-feature-row__content h2{
  margin:0 0 20px;
  color:var(--hwd-heading);
  font:600 clamp(30px,3vw,40px)/1.25 'Manrope',sans-serif;
}
/* Whole-block link: an overlay on the title anchor, so the block text may
   contain its own links without producing invalid nested anchors. */
.hwd-homeblocks .hwd-feature-row--linked{position:relative}
.hwd-homeblocks .hwd-feature-row__link{color:inherit;text-decoration:none}
.hwd-homeblocks .hwd-feature-row__link::after{content:"";position:absolute;inset:0;z-index:1}
.hwd-homeblocks .hwd-feature-row--linked .hwd-homeblocks__text a,
.hwd-homeblocks .hwd-feature-row--linked .hwd-homeblocks__button{position:relative;z-index:2}
.hwd-homeblocks__content--center{text-align:center}
.hwd-homeblocks__content--center .hwd-homeblocks__text,
.hwd-homeblocks__content--center h2{margin-inline:auto}
.hwd-homeblocks__content--right{text-align:right}
.hwd-homeblocks__content--right .hwd-homeblocks__text,
.hwd-homeblocks__content--right h2{margin-left:auto}
.hwd-homeblocks__text{max-width:560px;color:var(--hwd-text);font:400 18px/1.65 'Manrope',sans-serif}
.hwd-homeblocks__text > :last-child{margin-bottom:0}
.hwd-homeblocks__button{margin-top:24px}
.hwd-homeblocks .hwd-feature-row:hover .hwd-feature-row__image{transform:translateY(-8px)}
.hwd-homeblocks .hwd-feature-row__link:focus-visible{outline:3px solid rgba(111,64,241,.35);outline-offset:4px;border-radius:6px}
@supports selector(:has(*)){
  .hwd-homeblocks .hwd-feature-row__link:focus-visible{outline:none}
  .hwd-homeblocks .hwd-feature-row:has(.hwd-feature-row__link:focus-visible){
    outline:3px solid rgba(111,64,241,.35);
    outline-offset:8px;
    border-radius:12px;
  }
}
@media(prefers-reduced-motion:reduce){
  .hwd-homeblocks .hwd-feature-row__image{transition:none}
  .hwd-homeblocks .hwd-feature-row:hover .hwd-feature-row__image{transform:none}
}
@media(max-width:767px){
  .hwd-homeblocks .hwd-feature-row,
  .hwd-homeblocks .hwd-feature-row:nth-child(even),
  .hwd-homeblocks--all-left .hwd-feature-row,
  .hwd-homeblocks--all-right .hwd-feature-row{
    --media-column:1;
    --content-column:1;
    grid-template-columns:1fr;
    gap:26px;
    min-height:0;
    padding:42px 0;
    text-align:center;
  }
  .hwd-homeblocks .hwd-feature-row__media{grid-row:1}
  .hwd-homeblocks .hwd-feature-row__content{grid-row:2}
  .hwd-homeblocks .hwd-feature-row__image{max-width:min(82%,380px);max-height:300px}
  .hwd-homeblocks .hwd-feature-row__content h2{font-size:28px}
  .hwd-homeblocks__text{margin-inline:auto;font-size:16px}
  .hwd-homeblocks__content--center,
  .hwd-homeblocks__content--right{text-align:center}
  .hwd-homeblocks .hwd-feature-row__media--left,
  .hwd-homeblocks .hwd-feature-row__media--right{justify-content:center}
}