/* Giorge Outdoors: the few additions to Leil's theme CSS that Giorge's content needs. */

/* Logo: Giorge's wide wordmark in Leil's logo slot (Leil: 97x60, h-12 on phones) */
.site-logo { display: block; width: auto; height: 36px; margin: 6px 0; color: #fff; }
.footer-logo { display: block; width: auto; height: 46px; margin: 7px 0; color: #fff; }
@media (min-width: 1024px) { .site-logo { height: 46px; margin: 7px 0; } }

/* Leil's world map background, swapped for Great Britain with St Albans marked */
.world-map { background-size: auto 86%; }
.world-map.numbers { background-size: auto 46%; background-position: 50% 52%; }

/* Clips that sit where Leil has photos behave like the photos */
video[data-lazy-src] { background: var(--color-light, #efece1); }
a.hover-zoom video { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
a.hover-zoom:hover video { transform: scale(1.05); }
.cover video { display: block; }

/* Form feedback (FluentForm's own success style) */
.ff-message-success { margin-top: 16px; border-radius: 8px; }
.giorge-form-note { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.site-footer .giorge-form-note { color: var(--color-beige-500, #c6c0af); }
.site-footer .giorge-form-note a, .giorge-form-note a { text-decoration: underline; }

/* Giorge's photos are lighter than Leil's: a soft shade keeps white text on them legible */
.cover-area .cover::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(27, 32, 23, .5), rgba(27, 32, 23, 0) 65%); }
@media (min-width: 1024px) {
  .values-slider .swiper-slide > div > figure { position: relative; }
  .values-slider .swiper-slide > div > figure::after { content: ""; position: absolute; inset: 0 0 20px 0;
    border-radius: 16px; pointer-events: none;
    background: linear-gradient(90deg, rgba(27, 32, 23, .55), rgba(27, 32, 23, 0) 65%); }
}

/* Leil rounds the tab-panel photo's bottom-right corner; the same for the clips in that slot */
.tabs video { border-bottom-right-radius: 124px; }
@media (min-width: 64rem) { .tabs video { border-bottom-right-radius: 220px; } }
@media screen and (max-width: 768px) { .tabs video { border-radius: 10px 10px 124px; } }

/* Top and bottom scrims on photo covers so the white logo, menu and headings stay legible */
.hero::before, .cover::before { background: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .62)); }
.cover-area .cover::before, .cards .cover::before, .bg-green-600 .cover::before { background: linear-gradient(#0000 50%, #0009); }