/* Country compositions keep the main site's section spacing and breakpoints.
   Figma: N9NHQ2qLzd57JnsR3I0U0D / ES 10562:7373, AT 10804:1382,
   NL 10553:1889, IT 10601:2571, FR 10861:1390, IE 10842:2139. */
.country-header .site-navigation-bar { height: auto; }
.country-header .site-navigation-inner {
  justify-content: flex-start;
  gap: 24px;
  min-height: 90px;
}

.country-header .site-header-logo {
  flex: 0 0 207px;
  width: 207px;
  height: auto;
}

.country-header .site-header-logo img {
  width: 207px;
  height: 76px;
  object-fit: contain;
}

.country-header__tagline {
  align-self: flex-end;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.75px;
}

.country-header__tagline-mobile { display: none; }

.country-header--iccash .site-header-logo { flex-basis: 204px; width: 204px; }
.country-header--iccash .site-header-logo img { width: 204px; height: 67px; }
.country-header__contact {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  color: var(--shell-black);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.75px;
  text-decoration: none;
}
.country-header__contact:focus-visible { outline: 3px solid var(--ui-red); outline-offset: 4px; }
.country-header__contact:hover { color: var(--ui-red); }
.country-home .ui-marketing-hero h1 { max-width: 850px; }
.country-home .ui-action { max-width: 100%; }
.country-home .ui-intro-checklist__action { margin-top: 30px; }
.country-home .ui-full-width-media { height: auto; aspect-ratio: 4 / 1; }
.country-home .ui-full-width-media__image { object-position: center 25%; }

/* The Spanish image has its own crop; don't inherit the German photo offset. */
.country-home--es .ui-split-media__picture .ui-split-media__image {
  inset: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56.7% center;
}

.country-home .home-contact { scroll-margin-top: 30px; }
.country-home .home-contact #contactForm { background: var(--ui-white); }
/* Match the specificity of the English site's heading rule without changing it. */
html .country-home .ui-contact-form__header h2,
html .country-home .ui-contact-form__success h2 {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.25px;
}

.country-home .contact-agreement a { text-decoration: underline; overflow-wrap: anywhere; }
.country-home--es .ui-image-strip__item:nth-child(2) picture,
.country-home--it .ui-image-strip__item:nth-child(2) picture,
.country-home--fr .ui-image-strip__item:nth-child(2) picture { position: relative; }
.country-home--es .ui-image-strip__item:nth-child(2) img,
.country-home--it .ui-image-strip__item:nth-child(2) img,
.country-home--fr .ui-image-strip__item:nth-child(2) img {
  position: absolute;
  left: -13.33%;
  top: -21.5%;
  width: 126.66%;
  height: 143%;
  max-width: none;
}
.country-home--es .ui-image-strip__item:nth-child(3) img,
.country-home--it .ui-image-strip__item:nth-child(3) img,
.country-home--fr .ui-image-strip__item:nth-child(3) img { object-position: center bottom; }

/* IT/FR share these exact Figma photographs and their crop positions. */
.country-home--it .ui-full-width-media__image,
.country-home--fr .ui-full-width-media__image { object-position: center 26.23%; }
.country-home--it .ui-split-media__picture .ui-split-media__image,
.country-home--fr .ui-split-media__picture .ui-split-media__image {
  inset: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* The Austrian Figma strip crops the fairground photo around the Bankomat. */
.country-home--at .ui-full-width-media__image { object-position: center; }
.country-home--at .ui-image-strip__item:nth-child(3) picture { position: relative; }
.country-home--at .ui-image-strip__item:nth-child(3) img {
  position: absolute;
  left: -88.19%;
  top: -32.58%;
  width: 195.43%;
  height: 165.48%;
  max-width: none;
}

/* Dutch photographs keep their Figma crops inside the shared responsive blocks. */
.country-home--nl .ui-marketing-hero__text { font-weight: 700; }
.country-home--nl .ui-full-width-media__image { object-position: center 56.38%; }
.country-home--nl .ui-split-media__picture .ui-split-media__image {
  inset: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56.7% center;
}
.country-home--nl .ui-image-strip__item:nth-child(2) picture,
.country-home--nl .ui-image-strip__item:nth-child(4) picture { position: relative; }
.country-home--nl .ui-image-strip__item:nth-child(2) img {
  position: absolute;
  left: -39.64%;
  top: -7.21%;
  width: 169%;
  height: 107.33%;
  max-width: none;
}
.country-home--nl .ui-image-strip__item:nth-child(4) img {
  position: absolute;
  left: -11.46%;
  top: -46.37%;
  width: 122.92%;
  height: 185%;
  max-width: none;
}

/* Irish artwork: the banner and cash-access section share the new village photo. */
.country-home--ie .ui-split-media__picture .ui-split-media__image {
  inset: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% center;
}
.country-home--ie .ui-image-strip__item:first-child img { object-position: right center; }
.country-home--ie .ui-image-strip__item:nth-child(4) img { object-position: center bottom; }

.country-footer .site-footer-main { min-height: 0; padding-block: 40px 50px; }
.site-footer.country-footer .site-footer-grid {
  grid-template-columns: minmax(0, 3.4fr) repeat(2, minmax(0, 1fr));
  grid-template-areas: none;
}
.country-footer .site-footer-contact { overflow-wrap: anywhere; }
.country-footer .site-footer-grid > .site-footer-contact { padding-top: 0; }
.site-footer.country-footer--support .site-footer-grid {
  grid-template-columns: minmax(0, 282fr) minmax(0, 214fr) minmax(0, 240fr) minmax(0, 235fr);
}
/* Main-site mobile footers flatten support into named grid areas. Country
   footers use normal-flow columns, so keep these three contacts grouped. */
.country-footer .site-footer-support { display: flex; grid-area: auto; padding-top: 0; }

@media (min-width: 1024px) {
  .country-home--nl .ui-marketing-hero__content,
  .country-home--it .ui-marketing-hero__content,
  .country-home--fr .ui-marketing-hero__content { width: min(848px, 70%); }
  /* New Figma originals, 21 October 2026. Cover preserves their native aspect
     ratios; focal positions replace the old FR/IE artwork's zoom transforms.
     ES stays full bleed instead of copying the frame's empty 59px top strip. */
  .country-home--es .ui-marketing-hero__image { object-position: center top; }
  .country-home--it .ui-marketing-hero__image { object-position: center 22.66%; }
  .country-home--fr .ui-marketing-hero__image { object-position: center 25.75%; }
  .country-home--ie .ui-marketing-hero__image { object-position: center 29.37%; }
  .country-home--nl .ui-marketing-hero__image {
    position: absolute;
    left: -24.05%;
    top: -64%;
    width: 145.61%;
    height: 180%;
    max-width: none;
  }
  .country-home--ie .ui-marketing-hero__text { max-width: 640px; }
  .country-home--ie .ui-split-media__picture .ui-split-media__image {
    position: relative;
    left: -36.01%;
    top: -15.31%;
    width: 149.81%;
    height: 125.52%;
    max-width: none;
  }
  /* Preserve the desktop proportions without a fixed 647px image squeezing
     the Spanish copy at small-desktop / landscape-tablet widths. */
  .country-home .ui-split-media__layout { grid-template-columns: minmax(0, 610fr) minmax(0, 647fr); gap: clamp(32px, 5.5vw, 79px); }
  .country-home .ui-split-media__media { width: 100%; height: auto; aspect-ratio: 647 / 431; }
}

@media (min-width: 601px) {
  .country-home--ie .ui-full-width-media__picture { position: relative; }
  .country-home--ie .ui-full-width-media__image {
    position: absolute;
    left: 0;
    top: -46.9%;
    width: 105.28%;
    height: 235.33%;
    max-width: none;
    object-position: center;
  }
}

@media (max-width: 1359px) {
  /* Country headers show the full hotline; they do not need the main site's
     reserved space for the ATM link. Keep the shared right gutter. */
  .country-header .site-utility-inner { padding-left: 35px; }
}

@media (max-width: 1023px) {
  /* Keep the customers and ATMs in view as the new wide heroes narrow. */
  .country-home--es .ui-marketing-hero__image,
  .country-home--it .ui-marketing-hero__image,
  .country-home--fr .ui-marketing-hero__image,
  .country-home--ie .ui-marketing-hero__image { object-position: 85% center; }
  .country-home .ui-contact-page #contactForm .select-container { width: 100%; }
  .site-footer.country-footer .site-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }
  .country-footer .site-footer-links { grid-column: 1 / -1; }
  .country-footer .site-footer-support { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .country-header .site-utility-inner { padding-left: 20px; gap: 16px; }
  .country-header .site-utility-inner > .site-utility-item { font-size: 12px; letter-spacing: 0; }
  .country-header .site-navigation-inner { min-height: 80px; gap: 14px; }
  .country-header .site-header-logo { flex-basis: 155px; width: 155px; }
  .country-header .site-header-logo img { width: 155px; height: auto; }
  .country-header__contact { font-size: 14px; letter-spacing: 0; }
  .country-header__tagline { align-self: center; margin: 0; font-size: 11px; line-height: 16px; letter-spacing: 0; }
  /* In2Retail mobile lockup: Figma 11131:1332 (leftmost header variant).
     Keep the existing utility bar/selector and the AT/DE/EN headers unchanged. */
  .country-header--in2retail .site-navigation-bar { margin-top: 0; }
  .country-header--in2retail .site-navigation-inner {
    min-height: 102px;
    padding: 17px 16px 15px;
    gap: 12px;
  }
  .country-header--in2retail .site-header-logo {
    flex-basis: 191px;
    width: 191px;
    margin-top: 0;
  }
  .country-header--in2retail .site-header-logo img { width: 191px; height: 70px; }
  .country-header--in2retail .country-header__tagline {
    flex: 0 1 110px;
    min-width: max-content;
    min-height: 26px;
    align-self: flex-end;
    margin: 0 0 14px;
    font-weight: 500;
    line-height: 12px;
    letter-spacing: 0.5px;
  }
  .country-header--in2retail .country-header__tagline-desktop { display: none; }
  .country-header--in2retail .country-header__tagline-mobile { display: block; white-space: nowrap; }
  /* Long French words must respect the phone gutters at the shared type size. */
  .country-home--fr .ui-marketing-hero h1 {
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
    overflow-wrap: break-word;
  }
  /* Give percentage-height pictures a definite mobile height. Safari otherwise
     uses the shorter 4:1 aspect-ratio height and leaves the grey frame exposed. */
  .country-home .ui-full-width-media { height: 180px; }
  .country-home--it .ui-full-width-media__image,
  .country-home--fr .ui-full-width-media__image { object-position: right center; }
  .country-home--ie .ui-full-width-media__image { object-position: left center; }
  html .country-home .ui-contact-form__header h2,
  html .country-home .ui-contact-form__success h2 { font-size: 28px; letter-spacing: 0; }
  .site-footer.country-footer .site-footer-grid { grid-template-columns: minmax(0, 1fr); }
  .country-footer .site-footer-meta { height: auto; }
  .country-footer .site-footer-meta-inner { flex-direction: column; align-items: flex-start; gap: 16px; padding-block: 20px; }
  .country-footer .site-footer-copyright,
  .country-footer .site-footer-hotline { display: inline-flex; font-size: 12px; line-height: 18px; }
}

@media (max-width: 340px) {
  /* Keep the full Irish hotline and fixed-width selector inside the phone gutter. */
  .country-header .site-utility-inner { gap: 4px; }
}