/* ========================================
   COMPONENTE HERO (Banners Inclinados)
   ======================================== */

.hero {
  display: flex;
  gap: var(--space-md);
  margin: var(--space-sm) 0;
  padding: var(--space-sm);
  overflow-x: auto;
  scroll-behavior: smooth;
  /* Remove scrollbar */
  scrollbar-width: none;
  /* Disable text selection during drag */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.hero::-webkit-scrollbar {
  display: none;
}

.hero__banner {
  position: relative;
  background-color: var(--text-primary);
  color: var(--bg-primary);
  padding: var(--space-xs); /* reduced padding so banners appear smaller */
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 56px; /* reduced visual height */
  min-width: 130px; /* reduced visual width */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  transition: all var(--transition-base);
}

/* Remove solid background for banners that use custom background images/blobs */
.hero__banner.has-bg {
  background-color: transparent;
  background-image: none;
}

/* Align banner text/content inside the glass plate without touching HTML.
   - Use the same inset percentages as ::after so content sits visually inside the glass.
   - Center vertically while keeping left alignment for titles/descriptions.
*/
.hero__banner.has-bg {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* place text at the bottom of the glass */
  align-items: flex-start;  /* keep text left-aligned inside the glass */

  /* Use fixed vertical padding (rem) instead of % to avoid vertical growth
     on wide viewports. Keep horizontal padding in % for flexible layout. */
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 0.35rem; /* small top padding */
  padding-bottom: 0.6rem; /* slightly larger bottom padding so text sits clear of edge */
}

/* Ensure typographic spacing remains compact on small screens */
@media (max-width: 700px) {
  .hero__banner.has-bg {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 0.25rem; /* slightly smaller on mobile */
    padding-bottom: 0.5rem;
    justify-content: flex-end;
  }
}

/* Reset default paragraph margins inside hero banners (global `p` has large bottom margin). */
.hero__banner .hero__banner-description {
  margin: 0;
}

.hero__banner .hero__banner-title {
  margin: 0 0 0.25rem 0; /* small gap between title and description */
}

/* If you prefer centered text horizontally too, add `.hero__banner.has-bg.center-text` in HTML.
   This keeps the default left alignment unless you opt-in. */
.hero__banner.has-bg.center-text {
  align-items: center;
  text-align: center;
}

.hero__banner:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hero__banner-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.hero__banner-description {
  font-size: var(--font-size-xs);
  color: var(--bg-primary);
  font-weight: var(--font-weight-medium);
  opacity: 0.8;
}

@media (max-width: 768px) {
  .hero {
    gap: var(--space-sm);
    padding: var(--space-xs);
  }

  .hero__banner {
    min-height: 56px;
    min-width: 130px;
    padding: calc(var(--space-xs) * 0.9);
  }

  .hero__banner-title {
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 480px) {
  .hero {
    gap: var(--space-sm);
    padding: var(--space-sm);
  }

  .hero__banner {
    min-height: 56px;
    min-width: 130px;
    padding: var(--space-xs);
  }

  .hero__banner-title {
    font-size: 12px;
    margin-bottom: 2px;
  }

  .hero__banner-description {
    font-size: 10px;
  }
}

/* Ícones de redes sociais no hero */
.hero__social-icons {
  display: flex;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
  justify-content: center;
}

.hero__social-link {
  width: 40px;
  height: 40px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  transition: all var(--transition-fast);
}

.hero__social-link:hover {
  background-color: var(--accent-yellow);
  color: var(--bg-primary);
  border-color: var(--accent-yellow);
}

/* ===========================
   Glassmorphism enhancements for .hero__banner
   Additive styles only — preserves existing layout, sizes and text.
   Paste this at the end of `assets/css/hero.css`.
   =========================== */

/* Use existing positioning/overflow (already set). Create decorative blobs behind content. */
.hero__banner::before {
  content: "";
  position: absolute;
  inset: 0;                 /* covers full banner without changing its size */
  z-index: 0;               /* behind content */
  pointer-events: none;     /* don't block interactions */
  transform: translateZ(0); /* promote to its own layer for smoother rendering */
  will-change: opacity, transform;

  /* Soft colored blobs for a dark-themed background (low opacity) */
  background-image:
    radial-gradient(25rem 20rem at 8% 18%, rgba(255, 190, 60, 0.07) 0%, transparent 38%),
    radial-gradient(30rem 24rem at 88% 72%, rgba(90, 110, 255, 0.06) 0%, transparent 34%),
    radial-gradient(18rem 14rem at 52% 42%, rgba(150, 80, 200, 0.045) 0%, transparent 40%);

  /* Blur the decorative layer (this is not backdrop-filter) */
  filter: blur(20px) saturate(1.03);
  mix-blend-mode: screen; /* blend gently with existing banner background */
  opacity: 0.95;
}

/* Glass plate that gives the frosted/blurred 'glass' effect. Kept lightweight and inset so proportions aren't changed. */
.hero__banner::after {
  content: "";
  position: absolute;

  /* Smaller insets so the glass plate is more compact on smaller banners */
  left: 6%;
  right: 6%;
  top: 6%;
  bottom: 6%;

  z-index: 1; /* sits above blobs but behind the textual content */
  border-radius: 10px;

  /* Subtle translucent surface for dark theme */
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);

  pointer-events: none;

  /* Backdrop blur within the range requested (12–18px); balanced at 14px */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Ensure banner internal content stays above the decorative layers. Do not change padding/spacing. */
.hero__banner > * {
  position: relative;
  z-index: 2; /* above ::after */
  color: #ffffff; /* ensure legibility on dark glass; variables remain authoritative */
}

/* Mobile adjustments: slightly smaller blur and insets to preserve readability */
@media (max-width: 700px) {
  .hero__banner::after {
    left: 6%;
    right: 6%;
    top: 8%;
    bottom: 8%;
    border-radius: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .hero__banner::before {
    filter: blur(18px) saturate(1.02);
  }
}

/* Fallback when backdrop-filter is not supported: keep a translucent overlay for similar feel. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hero__banner::after {
    background: linear-gradient(180deg, rgba(255,255,255,0.032), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 6px 14px rgba(0,0,0,0.5);
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero__banner::before,
  .hero__banner::after {
    transition: none;
    will-change: auto;
  }
}

/* Notes:
   - This block only adds visual layers with pseudo-elements; it does NOT change HTML structure.
   - Avoids re-declaring positioning/overflow already present earlier in this file.
   - Blur values tuned to 12–14px for the glass plate and 18–22px for decorative background.
*/

/* -----------------------------------------------------------------
  Helper: allow setting a background image under the glass effect
  - Add the class `has-bg` to any `.hero__banner` in the HTML to enable.
  - Put your images in `assets/images/hero/` and name them as you prefer.
  - This keeps gradients (blobs) above the image and lets the ::after
    backdrop-filter blur the composite behind the glass.
 ----------------------------------------------------------------- */
.hero__banner.has-bg::before {
  /* image is listed last so gradients stay visually on top */
  background-image:
   radial-gradient(25rem 20rem at 8% 18%, rgba(255, 190, 60, 0.07) 0%, transparent 38%),
   radial-gradient(30rem 24rem at 88% 72%, rgba(90, 110, 255, 0.06) 0%, transparent 34%),
   radial-gradient(18rem 14rem at 52% 42%, rgba(150, 80, 200, 0.045) 0%, transparent 40%),
  url('../images/hero/banner-1.svg');

  background-size: cover, cover, cover, cover; /* ensure image covers area */
  background-position: center center;
  background-repeat: no-repeat;

  /* Remove per-layer filter so backdrop-filter blurs the underlying composite
    (prevents double-blur). If you want the pseudo-element itself blurred, re-enable. */
  filter: none;
  mix-blend-mode: normal;
}

/* Convenience: per-banner placeholders (replace URLs with your files). */
.hero__banner.has-bg:nth-child(1)::before { background-image: radial-gradient(28rem 22rem at 6% 22%, rgba(255,190,60,0.12), transparent 36%), radial-gradient(22rem 18rem at 78% 72%, rgba(150,80,200,0.06), transparent 40%), url('../images/hero/banner-1.svg'); }
.hero__banner.has-bg:nth-child(2)::before { background-image: radial-gradient(30rem 24rem at 12% 18%, rgba(80,130,255,0.12), transparent 36%), radial-gradient(20rem 16rem at 86% 68%, rgba(60,200,180,0.05), transparent 40%), url('../images/hero/banner-2.svg'); }
.hero__banner.has-bg:nth-child(3)::before { background-image: radial-gradient(26rem 20rem at 10% 24%, rgba(40,200,180,0.11), transparent 36%), radial-gradient(20rem 18rem at 84% 64%, rgba(230,120,220,0.05), transparent 42%), url('../images/hero/banner-3.svg'); }
.hero__banner.has-bg:nth-child(4)::before { background-image: radial-gradient(28rem 22rem at 14% 20%, rgba(200,80,255,0.12), transparent 36%), radial-gradient(24rem 20rem at 80% 70%, rgba(255,120,60,0.06), transparent 40%), url('../images/hero/banner-4.svg'); }

/* If you prefer to set images via utility classes instead of nth-child, example:
  <article class="hero__banner has-bg bg-1"> ... </article>
  Then add a rule: .hero__banner.bg-1::before { background-image: ..., url('../images/hero/banner-1.jpg'); }
*/


/* ---------------------------------------------------------------------
   Per-banner color blobs (faux 'images') and stronger visual readout
   Use nth-child to give each banner a distinct blob composition.
   --------------------------------------------------------------------- */
.hero__banner:nth-child(1)::before {
  /* Warm amber + soft purple */
  background-image:
    radial-gradient(28rem 22rem at 6% 22%, rgba(255, 190, 60, 0.12) 0%, transparent 36%),
    radial-gradient(22rem 18rem at 78% 72%, rgba(150, 80, 200, 0.06) 0%, transparent 40%);
  filter: blur(20px) saturate(1.06);
  opacity: 1;
  transform: rotate(-4deg) scale(1.02);
}

.hero__banner:nth-child(2)::before {
  /* Cool blue + indigo */
  background-image:
    radial-gradient(30rem 24rem at 12% 18%, rgba(80, 130, 255, 0.12) 0%, transparent 36%),
    radial-gradient(20rem 16rem at 86% 68%, rgba(60, 200, 180, 0.05) 0%, transparent 40%);
  filter: blur(22px) saturate(1.04);
  opacity: 1;
  transform: rotate(2deg) scale(1.01);
}

.hero__banner:nth-child(3)::before {
  /* Teal + soft magenta */
  background-image:
    radial-gradient(26rem 20rem at 10% 24%, rgba(40, 200, 180, 0.11) 0%, transparent 36%),
    radial-gradient(20rem 18rem at 84% 64%, rgba(230, 120, 220, 0.05) 0%, transparent 42%);
  filter: blur(20px) saturate(1.03);
  opacity: 1;
  transform: rotate(-2deg) scale(1.01);
}

.hero__banner:nth-child(4)::before {
  /* Purple + orange */
  background-image:
    radial-gradient(28rem 22rem at 14% 20%, rgba(200, 80, 255, 0.12) 0%, transparent 36%),
    radial-gradient(24rem 20rem at 80% 70%, rgba(255, 120, 60, 0.06) 0%, transparent 40%);
  filter: blur(21px) saturate(1.05);
  opacity: 1;
  transform: rotate(3deg) scale(1.01);
}

/* Slightly increase the glass blur and add subtle inner-dark vignette for depth */
.hero__banner::after {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 -6px 18px rgba(0,0,0,0.18);
}

/* Add a faint radial highlight to the top-left of the glass for a premium feel */
.hero__banner::after {
  background-image: radial-gradient(circle at 18% 20%, rgba(255,255,255,0.018), transparent 18%), linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
  background-blend-mode: normal, overlay;
}

/* If you want even stronger 'fake image' feel: slightly enlarge banners' pseudo background on hover (subtle). */
.hero__banner:hover::before {
  transform: scale(1.04) rotate(-3deg);
  transition: transform 360ms cubic-bezier(.2,.9,.2,1);
}

/* -----------------------------------------------------------------
   Desktop cap: keep banners compact on wide screens
   Some desktop viewports can make the hero area appear visually large
   due to larger gaps, pseudo-element blurs and percentage paddings.
   These rules limit min sizes and tighten insets on >=992px widths
   without affecting mobile responsiveness.
 ----------------------------------------------------------------- */
@media (min-width: 992px) {
  .hero {
    gap: var(--space-sm);
  }

  .hero__banner {
    min-height: 56px;   /* increased height for better visibility */
    min-width: 140px;   /* keep width compact as well */
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 3%;
    padding-bottom: 3%;
  }

  .hero__banner::after {
    left: 3%;
    right: 3%;
    top: 3%;
    bottom: 3%;
    border-radius: 10px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}