/*
 * cards.css: the four listing cards and the grid that holds them.
 *
 *   .hotel-card      hotel (was Elementor loop item 18599), with the preview gallery
 *                    that snippet 27 added
 *   .itinerary-card  twin centre (18932) and tour (18982)
 *   .country-card    child country (18905), the whole card is a link
 *   .card-grid       the loop grid: 3 columns, 2 up to 1024px, 1 up to 767px
 *
 * Breakpoints follow Elementor's: tablet extra up to 1366px, tablet up to 1024px, mobile
 * up to 767px.
 */

/* ---------- Grid ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  align-items:stretch;
}
.card-grid__cell{min-width:0}
/* Nothing to list: the loop grid's empty "nothing found" box, a 60px band. */
.card-grid-none{padding:30px 0;color:#1F2124;text-align:center}
@media (max-width:1024px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.card-grid{grid-template-columns:repeat(1,1fr)}}

/* Long names break rather than overflow, as inside every Elementor loop item. */
.card,.card *,.country-card,.country-card *{word-break:break-word}

/* ---------- Shared card frame (hotel, twin centre, tour) ---------- */
.card{
  display:grid;
  grid-template-columns:repeat(1,1fr);
  grid-template-rows:repeat(1,1fr);
  grid-auto-flow:row;
  align-content:start;
  justify-content:start;
  gap:0;
  position:relative;
  width:100%;
  min-width:0;
  border-radius:var(--radius,13px);
  /* The children are square and carry the visible edges, so the card clips them. */
  overflow:hidden;
  transition:background .3s,border .3s,box-shadow .3s,transform .4s;
}
/* THE HOVER ENLARGE STAYS A PLAIN 2D SCALE. A 3D transform (Elementor added a Z
   translate) makes the card a composited layer rasterised at its resting size, so the
   enlarged text goes soft. See docs/kb/rendering.md, "keep it 2D". */
.card:hover{transform:scale(1.0125)}

/* Photo area: 40px padding round a 155px spacer (::before, below), the featured image
   as background. */
.card__media{
  display:flex;
  flex-direction:column;
  gap:20px;
  position:relative;
  overflow:hidden;
  min-width:0;
  padding:40px 20px;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
}

.card__body{
  display:flex;
  position:relative;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-width:0;
  background-color:#fff;
}

.card__title{
  width:605px;
  max-width:100%;
  margin:0 0 -3px;
  padding:0;
  font-family:var(--font-brand);
  font-size:20px;
  font-weight:600;
  line-height:30px;
  color:var(--color-primary-dark);
  text-align:center;
}

.card__text{
  min-width:0;
  max-width:100%;
  margin:0 0 -15px;
  font-family:var(--font-brand);
  font-weight:400;
  color:var(--color-primary-dark);
  text-align:center;
}

/* The site button: blue, pill shaped, a blue glow on hover; the hover fill and its
   transitions are shared by every button (base.css, section 7). Nothing may move or scale it (a transform switches
   the label's antialiasing and it wobbles). After a mouse click the button keeps focus
   without a ring and shows the widget's own focus colours: near-black on the cards,
   white with dark text on the country heroes (--focus-light). */
.listing-button{
  position:relative;
  z-index:1;
  display:inline-block;
  padding:10px 40px;
  border-radius:var(--button-radius,999px);
  background-color:var(--color-primary);
  color:#fff;
  fill:#fff;
  font-family:var(--font-brand);
  font-size:15px;
  font-weight:500;
  line-height:1;
  text-align:center;
  text-decoration:none;
}
.listing-button:visited{color:#fff}
.listing-button:focus{background-color:var(--color-primary-dark);color:#fff}
.listing-button--focus-light:focus{background-color:#fff;color:var(--color-primary-dark)}
.listing-button:hover,
.listing-button:focus-visible{
  color:#fff;
  box-shadow:0 8px 24px -6px rgba(27,138,207,.55);
}
.listing-button:active{
  box-shadow:0 2px 8px -3px rgba(27,138,207,.5);
  transition-duration:.08s;
}
.listing-button:focus-visible{outline:2px solid var(--color-button-dark);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .listing-button{transition:background-color .12s linear,color .12s linear,box-shadow .12s linear}
}

/* ---------- Hotel card ---------- */
.hotel-card__country{
  display:flex;
  position:relative;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:10px 20px;
  background-color:var(--color-primary);
}
.hotel-card__country-name{
  width:605px;
  max-width:100%;
  margin:0;
  padding:0;
  font-family:var(--font-brand);
  font-size:12px;
  font-weight:600;
  line-height:1;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:#fff;
  text-align:center;
}
.hotel-card__body{min-height:190px;padding:24px 20px;gap:14px}
@media (max-width:1366px){.hotel-card__body{min-height:240px}}

/* Photo badges (redesigned 10 October 2026, Luke). Small tracked capitals, as the site's
   labels are, on a pill that reads over any photograph. Each kind has its own look:
   Visited By Us is dark glass with the tick in a blue disc, Preferred is white glass with
   blue type, Ultralux is solid black with the logo's blue keyline. */
.card-badge{
  position:absolute;
  top:14px;
  z-index:1;
  display:flex;
  align-items:center;
  gap:8px;
  height:30px;
  padding:0 13px 0 5px;
  border-radius:100px;
  background-color:rgba(22,22,21,.5);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  backdrop-filter:blur(12px) saturate(150%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 6px 18px -6px rgba(0,0,0,.45);
  color:#fff;
  text-align:center;
}
.card-badge--visited{left:14px}
.card-badge--status{right:14px;padding-left:11px;gap:7px}
.card-badge__icon{
  flex-shrink:0;
  width:20px;
  height:20px;
  padding:4px;
  border-radius:50%;
  background-color:var(--color-primary);
  color:#fff;
  fill:#fff;
}
.card-badge--status .card-badge__icon{width:12px;height:12px;padding:0;background:none;color:inherit;fill:currentColor}
.card-badge__text{
  font-family:var(--font-brand);
  font-size:11px;
  font-weight:600;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:inherit;
  white-space:nowrap;
}
.card-badge--preferred{
  background-color:rgba(255,255,255,.88);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 6px 18px -6px rgba(0,0,0,.35);
  color:var(--color-button-dark);
}
.card-badge--ultralux{
  background-color:#161615;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:inset 0 0 0 1px var(--color-primary),0 6px 18px -6px rgba(0,0,0,.5);
  color:#fff;
}
.card-badge--ultralux .card-badge__icon{fill:var(--color-primary)}

/* Preview gallery: up to five frames under the badges, dots that preview on hover and
   switch on click. Only frame 1 has a src; the rest load on first use (cards.js). */
.card-gallery{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}
.card-gallery__stage{position:absolute;top:0;right:0;bottom:0;left:0}
/* The element type is in the selector so it beats the region's img{height:auto}. */
.card-gallery__stage img.card-gallery__frame{
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  opacity:0;
  transition:opacity .35s ease;
}
.card-gallery__stage img.card-gallery__frame.is-on{opacity:1}
.card-gallery__dots{
  position:absolute;
  left:0;right:0;bottom:10px;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:2px;
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
/* Hidden until the card is engaged with; always visible on touch, where there is no hover. */
.card__media:hover .card-gallery__dots,
.card-gallery:focus-within .card-gallery__dots{opacity:1;pointer-events:auto}
@media (hover:none){
  .card-gallery__dots{opacity:1;pointer-events:auto}
}
/* An 8px dot in an 18px target: padding plus background-clip paints only the middle. */
.card-gallery__dot{
  width:18px;
  height:18px;
  padding:5px;
  box-sizing:border-box;
  border:0;
  border-radius:50%;
  cursor:pointer;
  background-color:rgba(255,255,255,.6);
  background-clip:content-box;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
  transition:background-color .2s ease,transform .2s ease;
}
/* The reset paints every focused button pink; restated so a clicked dot stays white.
   Order matters: hover and the current dot come after. */
.card-gallery__dot:focus{background-color:rgba(255,255,255,.6)}
.card-gallery__dot.is-on,
.card-gallery__dot.is-on:focus{background-color:#fff;transform:scale(1.2)}
.card-gallery__dot:hover,
.card-gallery__dot:hover:focus{background-color:#fff}
.card-gallery__dot:focus-visible{outline:2px solid #fff;outline-offset:-1px}
@media (prefers-reduced-motion:reduce){
  .card-gallery__stage img.card-gallery__frame{transition:none}
  .card-gallery__dot{transition:none}
}

/* ---------- Twin centre and tour cards ---------- */
.itinerary-card__body{
  min-height:270px;
  padding:40px 20px;
  gap:20px;
  border-top:3px solid var(--color-primary);
}
.itinerary-card__location{margin-bottom:0}

/* ---------- Country card ---------- */
/* a.country-card: the region's link reset (box-shadow:none) would otherwise take the
   card's shadow away. */
a.country-card{
  display:grid;
  grid-template-columns:repeat(1,1fr);
  grid-template-rows:repeat(1,1fr);
  grid-auto-flow:row;
  align-content:start;
  justify-content:start;
  gap:0;
  position:relative;
  width:100%;
  min-width:0;
  box-shadow:0 0 5px 0 rgba(0,0,0,.19);
  text-decoration:none;
  transition:background .3s,border .3s,box-shadow .3s,transform .4s;
}
.country-card:hover{transform:scale(1.0125)}
/* 40px padding, then a 70px spacer above and below the name (::before, ::after). */
.country-card__media{
  display:flex;
  flex-direction:column;
  gap:20px;
  position:relative;
  overflow:hidden;
  min-width:0;
  padding:40px 20px;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
}
.country-card__title{
  width:605px;
  max-width:100%;
  margin:0 0 -3px;
  padding:0;
  font-family:var(--font-brand);
  font-size:24px;
  font-weight:600;
  line-height:40px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--color-para-on-dark);
  text-align:center;
}
@media (max-width:767px){.country-card__title{line-height:26px}}

/* ---------- Layering ----------
   Elementor gave every widget inside these cards a no-op 3D transform, so each spacer,
   label, badge and button sat in its own compositor layer. That decides how the browser
   rasterises them: text in a layer is antialiased differently (greyscale rather than
   subpixel), and the gallery, which overlaps the spacer's layer, is drawn into a shared
   layer with the strip and body below it, which changes how the photographs are
   resampled and how the rounded corners are smoothed. Reproducing the same layers, with
   the same no-op transform, keeps the cards pixel-identical. (A lone perspective() is not
   treated as 3D, hence the rotateX(0).) Nothing here animates: the hover enlarge stays a
   plain 2D scale on the card itself.

   The spacers are empty blocks of the old heights, as pseudo-elements. */
.card__media::before,
.country-card__media::before,
.country-card__media::after{
  content:"";
  display:block;
  position:relative;
  flex-shrink:0;
}
.card__media::before{height:155px}
.country-card__media::before,
.country-card__media::after{height:70px}
.card__media::before,
.country-card__media::before,
.country-card__media::after,
.card-badge,
.hotel-card__country-name,
.card__title,
.card__text,
.card .listing-button{transform:perspective(1px) rotateX(0deg)}
/* The country card itself was such a layer too, at rest. Its hover enlarge is the plain
   2D scale above, so the enlarged name stays sharp. */
.country-card,
.country-card__title{transform:perspective(1px) rotateX(0deg)}
.country-card:hover{transform:scale(1.0125)}