/**
 * Gig Advertisement banners + slider (v1.7.8).
 *
 * Loaded only when at least one banner is live. Slides are stacked with
 * CSS grid (grid-area:1/1) so the container always has the height of
 * its tallest slide — banners fade without ANY layout shift and without
 * JavaScript height measuring.
 */

.gig-ads{
  position: relative;
  margin: 20px 0;
  outline: none;
}

/* Placement rhythm */
.gig-ads--home_below_hero{ margin: 26px 0 8px; }
.gig-ads--home_above_footer,
.gig-ads--allads_above_footer,
.gig-ads--store_above_footer,
.gig-ads--account_above_footer,
.gig-ads--login_above_footer,
.gig-ads--register_above_footer{ margin: 12px 0 34px; }
.gig-ads--allads_below_header,
.gig-ads--store_below_header,
.gig-ads--account_below_header,
.gig-ads--login_below_header,
.gig-ads--register_below_header{ margin: 18px 0 8px; }

/* Stacked slides = fade with intrinsic height (no layout shift). */
.gig-ads__viewport{
  display: grid;
  border-radius: var(--gig-radius, 12px);
}
.gig-ads__slide{
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;
  pointer-events: none;
}
.gig-ads__slide.is-active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* The banner itself: modern card look, never stretched. */
.gig-ads__link{ display: block; }
.gig-ads__slide img{
  display: block;
  width: 100%;
  height: auto;               /* keeps the image's own ratio — no distortion */
  max-height: 420px;
  object-fit: contain;
  object-position: center;
  border-radius: var(--gig-radius, 12px);
  box-shadow: var(--gig-shadow, 0 4px 18px rgba(20,33,61,.08));
  transition: transform .35s ease, box-shadow .35s ease;
}
.gig-ads__link:hover img,
.gig-ads__link:focus-visible img{
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--gig-shadow-lg, 0 12px 32px rgba(20,33,61,.16));
}

/* Arrows */
.gig-ads__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(20, 33, 61, .55);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease, background .25s ease;
}
.gig-ads__arrow--prev{ left: 12px; }
.gig-ads__arrow--next{ right: 12px; }
.gig-ads:hover .gig-ads__arrow,
.gig-ads:focus-within .gig-ads__arrow{ opacity: 1; }
.gig-ads__arrow:hover{ background: rgba(20, 33, 61, .85); }
.gig-ads__arrow:focus-visible{ opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }

/* Dots */
.gig-ads__dots{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 7px;
  pointer-events: none;
}
.gig-ads__dot{
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 1px rgba(20, 33, 61, .25);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .2s ease, background .2s ease;
}
.gig-ads__dot.is-active{
  background: #fff;
  transform: scale(1.25);
  box-shadow: 0 0 0 1px rgba(20, 33, 61, .45);
}

/* Touch + small screens */
@media (max-width: 760px){
  .gig-ads{ margin: 16px 0; }
  .gig-ads__slide img{ max-height: 300px; }
  .gig-ads__arrow{ width: 32px; height: 32px; font-size: 13px; opacity: 1; background: rgba(20,33,61,.4); }
  .gig-ads__arrow--prev{ left: 8px; }
  .gig-ads__arrow--next{ right: 8px; }
}
@media (max-width: 480px){
  .gig-ads__slide img{ max-height: 220px; border-radius: 10px; }
  .gig-ads__viewport{ border-radius: 10px; }
}

/* Accessibility: respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce){
  .gig-ads__slide{ transition: none; }
  .gig-ads__slide img{ transition: none; }
  .gig-ads__link:hover img{ transform: none; }
}

/* =========================================================================
 * v1.7.9 — Optional CTA button overlay
 *
 * Additive only: none of the rules below change a banner unless its
 * "Show CTA Button" switch is ON. The button lives INSIDE the existing
 * banner link, so clicking it is exactly a banner click (same URL, same
 * new-tab behaviour). On hover the image darkens gently behind a fading
 * shade while the button stays bright; on touch devices the button is
 * always visible — no hover required.
 * ====================================================================== */

.gig-ads__link--cta,
.gig-ads__frame--cta{
  position: relative;
  display: block;
  border-radius: var(--gig-radius, 12px);
}

/* Smooth darkening shade — fades in on hover/focus only. */
.gig-ads__shade{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(20,33,61,.10), rgba(20,33,61,.38));
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.gig-ads__link--cta:hover .gig-ads__shade,
.gig-ads__link--cta:focus-visible .gig-ads__shade,
.gig-ads__frame--cta:hover .gig-ads__shade{
  opacity: 1;
}

/* The button itself — theme colours, rounded, always readable. */
.gig-ads__cta{
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 32px);
  padding: clamp(8px, 1.4vw, 12px) clamp(16px, 2.6vw, 26px);
  font-family: var(--font-display, inherit);
  font-size: clamp(12.5px, 1.5vw, 15px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* v1.9.29 — dark text on the amber button.
     White on amber is a contrast ratio of roughly 2:1 — below the 4.5:1
     minimum for readable text, and visibly washed out on the banner.
     The theme navy against the same amber is about 8:1, so the label
     reads cleanly at the small sizes this button uses. */
  color: var(--gig-navy, #14213d);
  background: var(--gig-amber, #f59e0b);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(20, 33, 61, .28);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, filter .3s ease;
}
.gig-ads__link--cta:hover .gig-ads__cta,
.gig-ads__link--cta:focus-visible .gig-ads__cta,
.gig-ads__frame--cta:hover .gig-ads__cta{
  transform: var(--gig-cta-align, none) scale(1.05);
  box-shadow: 0 10px 26px rgba(20, 33, 61, .38);
  filter: brightness(1.06);
}

/* Nine overlay positions. Safe 16px inset keeps the button on the image
   at every screen size; centred variants use a transform that the hover
   scale above preserves via --gig-cta-align. */
.gig-ads__cta--bottom-left   { left: 16px;  bottom: 16px; }
.gig-ads__cta--bottom-center { left: 50%;   bottom: 16px; --gig-cta-align: translateX(-50%); transform: translateX(-50%); }
.gig-ads__cta--bottom-right  { right: 16px; bottom: 16px; }
.gig-ads__cta--center-left   { left: 16px;  top: 50%;     --gig-cta-align: translateY(-50%); transform: translateY(-50%); }
.gig-ads__cta--center        { left: 50%;   top: 50%;     --gig-cta-align: translate(-50%,-50%); transform: translate(-50%,-50%); }
.gig-ads__cta--center-right  { right: 16px; top: 50%;     --gig-cta-align: translateY(-50%); transform: translateY(-50%); }
.gig-ads__cta--top-left      { left: 16px;  top: 16px; }
.gig-ads__cta--top-center    { left: 50%;   top: 16px;    --gig-cta-align: translateX(-50%); transform: translateX(-50%); }
.gig-ads__cta--top-right     { right: 16px; top: 16px; }

/* Tablets & phones: tighter inset, smaller pill — never overflows and
   always visible without hover (the shade simply never appears). */
@media (max-width: 760px){
  .gig-ads__cta{ max-width: calc(100% - 20px); padding: 7px 16px; font-size: 12.5px; }
  .gig-ads__cta--bottom-left, .gig-ads__cta--center-left, .gig-ads__cta--top-left{ left: 10px; }
  .gig-ads__cta--bottom-right, .gig-ads__cta--center-right, .gig-ads__cta--top-right{ right: 10px; }
  .gig-ads__cta--bottom-left, .gig-ads__cta--bottom-center, .gig-ads__cta--bottom-right{ bottom: 10px; }
  .gig-ads__cta--top-left, .gig-ads__cta--top-center, .gig-ads__cta--top-right{ top: 10px; }
}

/* When a slider shows dots, lift bottom-positioned buttons clear of them. */
.gig-ads--slider .gig-ads__cta--bottom-left,
.gig-ads--slider .gig-ads__cta--bottom-center,
.gig-ads--slider .gig-ads__cta--bottom-right{ bottom: 30px; }

/* Accessibility: respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce){
  .gig-ads__shade{ transition: none; }
  .gig-ads__cta{ transition: none; }
  .gig-ads__link--cta:hover .gig-ads__cta,
  .gig-ads__frame--cta:hover .gig-ads__cta{ transform: var(--gig-cta-align, none); }
}