/* ===== AYITA PAGE STYLES ===== */

/* AYITA Hero image integration */
.ayita-hero-img {
  max-width: 520px;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);

  /* soft blend on all edges */
  -webkit-mask-image:
    linear-gradient(
      to right,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 10%,
      rgba(0,0,0,1) 92%,
      rgba(0,0,0,0) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 8%,
      rgba(0,0,0,1) 92%,
      rgba(0,0,0,0) 100%
    );

  -webkit-mask-composite: intersect;
  mask-composite: intersect;

  mask-image:
    linear-gradient(
      to right,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 10%,
      rgba(0,0,0,1) 92%,
      rgba(0,0,0,0) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,1) 8%,
      rgba(0,0,0,1) 92%,
      rgba(0,0,0,0) 100%
    );

  filter: saturate(0.9) brightness(0.95);
}

.ayita-slide {
  width: 100%;
  height: 260px;
  overflow: hidden;
  border-radius: 12px;
}

.ayita-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ===== HOMEPAGE HERO WITH BACKGROUND ===== */

.page-home .hero.hero-bg {
  min-height: auto;
  padding: 2rem 0 2rem 0;
}

.page-home .hero.hero-bg .bg-holder {
  background-size: cover;
  background-position: right 15%;
  opacity: 0.9;
}

/* Gradient overlay: dark blue left (text), transparent right (image) */
.page-home .hero.hero-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to right,
    rgba(31,47,74,0.95) 0%,
    rgba(31,47,74,0.85) 35%,
    rgba(31,47,74,0.5) 55%,
    rgba(31,47,74,0.2) 75%,
    rgba(31,47,74,0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.page-home .hero.hero-bg .container {
  position: relative;
  z-index: 2;
}

.page-home .hero-eyebrow {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.5rem;
  display: block;
}

.page-home .hero-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 1.25rem;
}

.page-home .hero-subtitle {
  font-size: 1.15rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
  margin-bottom: 2rem;
}

.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.page-home .hero-actions .btn {
  font-size: 0.95rem;
}

.page-home .hero-actions .btn-outline-light {
  border-width: 1px;
}

.page-home .hero-actions .btn-outline-light:hover {
  background-color: rgba(255,255,255,0.1);
}


/* ===== PILOT PAGE HERO (uses bg-holder pattern) ===== */

.hero-pilot {
  position: relative;
}

.hero-pilot .bg-holder {
  background-size: cover;
  background-position: center center;
}

.hero-pilot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to right,
    rgba(12,35,64,0.95) 0%,
    rgba(12,35,64,0.85) 30%,
    rgba(12,35,64,0.5) 50%,
    rgba(12,35,64,0.2) 70%,
    rgba(12,35,64,0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-pilot .container {
  position: relative;
  z-index: 2;
}


/* ===== RESOURCES PAGE HERO (uses bg-holder pattern) ===== */

.hero-resources {
  position: relative;
}

.hero-resources .bg-holder {
  background-size: cover;
  background-position: center center;
}

.hero-resources::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to right,
    rgba(12,35,64,0.92) 0%,
    rgba(12,35,64,0.8) 40%,
    rgba(12,35,64,0.5) 60%,
    rgba(12,35,64,0.3) 80%,
    rgba(12,35,64,0.2) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-resources .container {
  position: relative;
  z-index: 2;
}


/* ===== AYITA PAGE HERO (uses bg-holder pattern) ===== */

.hero-ayita {
  position: relative;
}

.hero-ayita .bg-holder {
  background-size: cover;
  background-position: center center;
}

.hero-ayita::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to right,
    rgba(12,35,64,0.97) 0%,
    rgba(12,35,64,0.92) 30%,
    rgba(12,35,64,0.7) 50%,
    rgba(12,35,64,0.35) 70%,
    rgba(12,35,64,0.1) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-ayita .container {
  position: relative;
  z-index: 2;
}


/* ===== PAMOLA PAGE HERO (uses bg-holder pattern) ===== */

.hero-pamola {
  position: relative;
}

.hero-pamola .bg-holder {
  background-size: cover;
  background-position: center center;
}

.hero-pamola::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to right,
    rgba(12,35,64,0.97) 0%,
    rgba(12,35,64,0.92) 30%,
    rgba(12,35,64,0.7) 50%,
    rgba(12,35,64,0.35) 70%,
    rgba(12,35,64,0.1) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-pamola .container {
  position: relative;
  z-index: 2;
}


/* ===== SHARED UTILITIES ===== */

/* Lime accent color (brand) */
.text-lime {
  color: #b5de2e !important;
}

.bg-lime {
  background-color: #b5de2e !important;
}

/* Card hover effects */
.card.shadow-sm {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card.shadow-sm:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.12) !important;
}

/* Form styling for pilot and resources pages */
.page-pilot .form-control,
.page-pilot .form-select,
.page-resources .form-control,
.page-resources .form-select {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

.page-pilot .form-control:focus,
.page-pilot .form-select:focus,
.page-resources .form-control:focus,
.page-resources .form-select:focus {
  border-color: #1f2f4a;
  box-shadow: 0 0 0 0.2rem rgba(31,47,74,0.15);
}

/* Badge customizations */
.badge.bg-light {
  border: 1px solid #dee2e6;
}


/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 991.98px) {
  .hero-pilot::after,
  .hero-resources::after,
  .hero-ayita::after,
  .hero-pamola::after,
  .hero-finance::after,
  .hero-industry::after {
    background: linear-gradient(
      to bottom,
      rgba(12,35,64,0.9) 0%,
      rgba(12,35,64,0.7) 100%
    );
  }
}


/* ===== FINANCE INDUSTRY PAGE HERO ===== */

.hero-finance {
  position: relative;
}

.hero-finance .bg-holder {
  background-size: cover;
  background-position: right 30%;
}

.hero-finance::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to right,
    rgba(12,35,64,0.98) 0%,
    rgba(12,35,64,0.95) 35%,
    rgba(12,35,64,0.85) 50%,
    rgba(12,35,64,0.5) 70%,
    rgba(12,35,64,0.2) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-finance .container {
  position: relative;
  z-index: 2;
}


/* ===== INDUSTRY PAGES HERO (generic for cybersecurity, healthcare, vendors) ===== */

.hero-industry {
  position: relative;
}

.hero-industry .bg-holder {
  background-size: cover;
  background-position: right 30%;
}

.hero-industry::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to right,
    rgba(12,35,64,0.98) 0%,
    rgba(12,35,64,0.95) 35%,
    rgba(12,35,64,0.85) 50%,
    rgba(12,35,64,0.5) 70%,
    rgba(12,35,64,0.2) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-industry .container {
  position: relative;
  z-index: 2;
}
/* ═══════════════════════════════════════════════════════════════
   MOBILE TYPOGRAPHY FIX - Hero Headlines Letter Spacing
   Added: 2026-01-03
   Issue: Letters compressed on mobile due to clamp() font scaling
   ═══════════════════════════════════════════════════════════════ */

/* Base letter-spacing for hero headlines - ALL hero types */
.hero-industry h1,
.hero-finance h1,
.hero-pilot h1,
.hero-resources h1,
.hero-ayita h1,
.hero-ayita h2,
.hero-pamola h1,
.hero-pamola h2,
.page-home .hero-title {
  letter-spacing: -0.01em !important; /* slight tightening on desktop is OK */
}

/* Mobile: loosen letter-spacing when font scales down */
@media (max-width: 768px) {
  .hero-industry h1,
  .hero-finance h1,
  .hero-pilot h1,
  .hero-resources h1,
  .hero-ayita h1,
  .hero-ayita h2,
  .hero-pamola h1,
  .hero-pamola h2,
  .page-home .hero-title {
    letter-spacing: 0.01em !important; /* slightly positive for readability */
    word-spacing: 0.05em !important;   /* also helps with word separation */
  }
  
  /* The italic accent line especially needs more space */
  .hero-industry h1 .text-warning,
  .hero-finance h1 .text-warning,
  .hero-pilot h1 .text-warning,
  .hero-resources h1 .text-warning,
  .hero-ayita h1 .text-warning,
  .hero-ayita h2 .text-warning,
  .hero-pamola h1 .text-warning,
  .hero-pamola h2 .text-warning {
    letter-spacing: 0.02em !important;
  }
}

/* Extra small screens - even more spacing */
@media (max-width: 480px) {
  .hero-industry h1,
  .hero-finance h1,
  .hero-pilot h1,
  .hero-resources h1,
  .hero-ayita h1,
  .hero-ayita h2,
  .hero-pamola h1,
  .hero-pamola h2,
  .page-home .hero-title {
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important; /* also helps readability */
  }
  
  .hero-industry h1 .text-warning,
  .hero-finance h1 .text-warning,
  .hero-pilot h1 .text-warning,
  .hero-resources h1 .text-warning,
  .hero-ayita h1 .text-warning,
  .hero-ayita h2 .text-warning,
  .hero-pamola h1 .text-warning,
  .hero-pamola h2 .text-warning {
    letter-spacing: 0.03em !important;
  }
}