/**
 * Kopa Tours homepage layout repairs for static restore.
 * Fixes hero grid, oversized logo, nav offset, gallery gap, and typography.
 */

/* Side nav offset only applies when nav panel is present */
.hc-navoffset {
  margin-left: 0 !important;
}

/* Hero background grid */
.headline-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(65vh, max-content) !important;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.headline-grid > div {
  grid-area: 1 / 1 / 2 / 2 !important;
  min-height: 65vh;
}

@media (min-width: 768px) {
  .headline-grid,
  .headline-grid > div {
    min-height: 75vh;
  }
}

/* Hero headline - stays on hero only, does NOT follow scroll */
.tip-padding,
.tip-padding.position-fixed {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  pointer-events: none;
}

app-home-page,
[_nghost-ftj-c39] {
  position: relative;
  display: block;
}

.tip-padding .u-header__banner-title,
.tip-padding .u-header__banner-text {
  color: var(--fg-color) !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* Hero logo - prevent 100% width blowout */
.kopa-hero-logo,
figure.position-absolute.right-0.left-0.bottom-0 {
  position: relative !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: 100%;
  max-width: 240px;
  margin: 0 auto 1.5rem;
  text-align: center;
}

.kopa-hero-logo__img,
figure.position-absolute img[alt="Kopa Tours Logo"] {
  width: auto !important;
  max-width: 220px !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* Pull hero logo up over the hero image */
.headline-grid + .col-12.bg-default {
  margin-top: -5rem;
  position: relative;
  z-index: 5;
  padding-top: 0;
}

@media (min-width: 768px) {
  .headline-grid + .col-12.bg-default {
    margin-top: -7rem;
  }
}

/* Hide empty spacer div after logo */
.container.position-relative[style*="bottom: 25%"] {
  display: none !important;
}

.col-12.bg-default > .container.min-height-xs-100vh {
  min-height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 1rem;
}

.row.w-100.top-padding {
  margin-top: 0 !important;
  justify-content: center;
}

.row.w-100.top-padding > .col-9,
.row.w-100.top-padding > .col-md-7,
.row.w-100.top-padding > .col-lg-5 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Content columns */
.bg-default .container.space-top-md-2 > .row.w-100 {
  align-items: flex-start;
}

.bg-default .container.space-top-md-2 > .row.w-100 > .col-md-5 {
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .bg-default .container.space-top-md-2 > .row.w-100 {
    display: flex;
    flex-wrap: wrap;
  }

  .bg-default .container.space-top-md-2 > .row.w-100 > .col-md-5 {
    flex: 0 0 42%;
    max-width: 42%;
  }

  .bg-default .container.space-top-md-2 > .row.w-100 > #SVGDivider1 {
    flex: 0 0 58%;
    max-width: 58%;
  }
}

/* Photo mosaic fallback (fancy gallery chunk missing) */
#SVGDivider1 {
  margin-top: 0 !important;
  min-height: 320px;
}

#SVGDivider1 .centered-y {
  position: relative !important;
  top: auto !important;
  transform: none !important;
  padding-bottom: 0 !important;
}

#SVGDivider1 .centered-y img[alt="African animal photo gallery framing"] {
  display: none !important;
}

.kopa-photo-mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.kopa-photo-mosaic img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

@media (min-width: 992px) {
  .kopa-photo-mosaic {
    max-width: 100%;
  }

  .kopa-photo-mosaic img {
    height: 160px;
  }
}

/* Itinerary + trip offerings row */
.container.space-top-2.mt-4 > .row {
  align-items: flex-start;
}

.container.space-top-2.mt-4 > .row > .col-lg-5.order-lg-4 {
  padding-top: 1rem;
}

/* Itinerary cards centered */
.itin-slide {
  margin: 0 auto;
}

.limited-paging {
  margin-top: 0.5rem;
}

/* Trip toggle badge positioning */
.badge-pos {
  position: relative !important;
  top: -8px;
  margin-left: 4px;
}

/* Fix broken carousel image paths in cards */
.carousel-cell img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Footer flag path consistency */
.usBadgeFooter,
.usBadge {
  vertical-align: middle;
}

/* Spacing rhythm between major sections */
.space-top-md-2 {
  padding-top: 2rem !important;
}

.container.space-top-1.space-top-md-2 {
  padding-top: 2.5rem !important;
}

/* ---- Testimonials carousel ---- */
#testimonialCarousel {
  height: auto !important;
  min-height: 280px;
  margin-bottom: 2rem;
  overflow: visible;
}

#testimonialCarousel .carousel-container {
  overflow: hidden !important;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

#testimonialCarousel .carousel-cells {
  width: 100% !important;
  display: block !important;
}

#testimonialCarousel .carousel-cell {
  width: 100% !important;
  max-width: 720px;
  margin: 0 auto;
  transform: none !important;
  padding: 0 1rem;
  box-sizing: border-box;
}

#testimonialCarousel .carousel-cell.kopa-hidden {
  display: none !important;
}

#testimonialCarousel .carousel-cell .h3 {
  font-size: 1.1rem;
  line-height: 1.55;
  margin-bottom: 1rem;
  white-space: normal;
}

#testimonialCarousel .u-avatar {
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin-top: 0.5rem;
}

#testimonialCarousel .u-avatar img {
  width: 100px !important;
  height: 100px !important;
  object-fit: cover;
  border-radius: 50%;
}

#testimonialCarousel .carousel-arrows-outside .carousel-arrow-prev {
  left: 0 !important;
}

#testimonialCarousel .carousel-arrows-outside .carousel-arrow-next {
  right: 0 !important;
}

/* ---- Footer ---- */
.footer-logo img,
img[alt="full-logo-no-words cute icon"] {
  width: 52px !important;
  height: 52px !important;
  display: inline-block;
  vertical-align: middle;
}

.footer-kopa {
  display: inline-block;
  vertical-align: middle;
}

app-app-footer .media img,
app-app-footer picture img {
  width: auto !important;
  height: 42px !important;
  object-fit: contain;
}

app-app-footer .btn-footer {
  display: block;
  text-align: left;
}

app-app-footer .row.justify-content-sm-between {
  align-items: center;
}

app-app-footer .text-sm-right {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  app-app-footer .text-sm-right {
    justify-content: flex-end;
  }
}

/* Kilimanjaro tagline section */
.container.text-center.space-bottom-2 h1 {
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.6;
}