/* ============================================================
   TRETIAKOV IN ATHENS — Brand Supplemental Styles
   Covers: badge-deep, guide card overrides, about tweaks
   ============================================================ */

/* Extra badge types */
.badge-deep {
  background: #0E3D72;
  color: #F5F2EE;
}

/* Hero float positions */
.hero-float-owl  {
  top: 10%;
  left: 2%;
}
.hero-float-wave {
  bottom: 24%;
  left: 6%;
}
.hero-float-pin  {
  top: 22%;
  left: 46%;
  display: none; /* hidden on mobile, shown via media query */
}
@media (min-width: 900px) {
  .hero-float-pin { display: block; }
}

/* Guide card image area — responsive height */
.guide-card-image {
  min-height: 280px;
  height: clamp(280px, 35vw, 360px);
}

/* Photo cover cards — real images */
.guide-card-photo {
  position: relative;
  overflow: hidden;
  transition: none;
  background-color: #17579B;
}

/* Blurred background layer — fills gaps when poster is contain */
.guide-card-photo .photo-blur-bg {
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  object-fit: cover;
  object-position: center center;
  filter: blur(14px) brightness(0.7) saturate(1.3);
  transform: scale(1.05);
  z-index: 0;
  pointer-events: none;
}

/* Main poster — fills full card area */
.guide-card-photo .photo-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1);
  transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}
.guide-card:hover .guide-card-photo .photo-bg-img {
  transform: scale(1.04);
}

/* Top-left brand tint — subtle overlay on the blurred bg */
.guide-card-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    rgba(23,87,155,0.15) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 2;
}

/* Bottom fade — only covers the very bottom strip where badge/num sit */
.guide-card-photo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 72px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(8,28,60,0.55) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Keep badges above the gradient overlay */
.guide-card-photo .guide-card-badge,
.guide-card-photo .guide-card-num,
.guide-card-photo .card-doodle-accent {
  position: relative;
  z-index: 4;
}

/* Badge — glass backdrop for readability on photos */
.guide-card-photo .badge {
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
  border: 1px solid rgba(245,242,238,0.28);
}

/* Number — watermark style on photo */
.guide-card-photo .guide-card-num {
  color: rgba(245,242,238,0.18);
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  font-size: 3.2rem;
}

/* Small brand doodle accent in top-right corner of photo card */
.card-doodle-accent {
  position: absolute;
  top: 12px;
  right: 14px;
  opacity: 0.38;
  pointer-events: none;
}

/* Athens guide — show accent olive branch */
.guide-card-photo.photo-athens::after {
  background: linear-gradient(
    to bottom,
    transparent 20%,
    rgba(10,35,75,0.22) 60%,
    rgba(8,28,60,0.55) 100%
  );
}

/* Bottom strip — thin terracotta line accent on photo cards */
.guide-card-photo .photo-line-accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, #CC5628 0%, #CC5628 30%, transparent 100%);
  z-index: 4;
  opacity: 0.85;
}

/* Stat bar wave top separator */
.stats-bar::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(245,242,238,0.12), transparent);
}

/* About section illustration responsive */
@media (max-width: 768px) {
  .about-illus svg {
    max-width: 260px;
    margin: 0 auto;
  }
  .about-heading {
    font-size: clamp(1.7rem, 5vw, 2.4rem);
  }
  
  /* Guide cards — better mobile height */
  .guide-card-image {
    min-height: 240px;
    height: 280px;
  }
  
  /* Larger badges on mobile for better readability */
  .guide-card-photo .badge {
    font-size: 0.7rem;
    padding: 6px 11px;
  }
  
  .guide-card-photo .guide-card-num {
    font-size: 2.8rem;
  }
}

@media (max-width: 480px) {
  /* Single column — taller cards for better image display */
  .guide-card-image {
    min-height: 300px;
    height: 340px;
  }
}

/* Sketch circle highlight — blue text context */
.sketch-circle::before {
  border-color: var(--blue);
}

/* Which guide section title sizing */
.which-guide-section .section-title {
  font-size: clamp(2rem, 3.5vw, 3.2rem);
}

/* Footer illustration row sizing */
.footer-illus-row svg {
  width: 28px;
  height: 32px;
}

/* Navbar logo mark — color fix when scrolled */
.navbar.scrolled .logo-mark line,
.navbar.scrolled .logo-mark rect,
.navbar.scrolled .logo-mark path {
  stroke: var(--blue-dark);
}
.navbar.scrolled .logo-mark circle[fill="#CC5628"] {
  fill: var(--terra);
}

/* Illus band color */
.illus-band-item svg {
  color: rgba(245,242,238,0.68);
}

/* Doodle Sans fallback: if CDN fails, use Caveat */
@supports not (font-family: 'Doodle Sans') {
  :root {
    --font-display: 'Caveat', cursive;
  }
}

/* Remove old css/illustrations.css dependency if it exists */
/* All illustrations are now inline SVG in HTML */