/*
Copyright © Wild Rose Devs. & Alberta Lynx 2025. All rights reserved.

This software and its source code are proprietary and confidential.
Unauthorized copying, distribution, modification, or use in whole or in part
is strictly prohibited and may result in civil and/or criminal penalties.

No license or rights are granted by implication or otherwise under any
intellectual property rights.

For licensing inquiries, contact: https://wildrosedevs.ca
*/

/* HERO SECTION */
.hero-s {
  position: relative;
  width: 100%;
  height: 50vh;
  background: url("../images/hero/issues-hero.avif") center/cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-s .hero-title {
  position: static;
  margin: 0;
  padding: 0;
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: 1.2;
  color: #f5f5f5;
  text-shadow: none;
}

/* APPROACH SECTION */
.approach-section {
  background: url("../images/backgrounds/image0.avif") center/cover no-repeat;
  padding: 2rem;
}

.approach-content {
  max-width: 1200px;
  margin: 0 auto;
  color: whitesmoke;
}

.approach-title {
  font-size: 50px;
  color: #7ed957;
  font-weight: bold;
  text-align: left;
  max-width: 600px;
  margin: 0 0 40px 0;
  display: inline-block;
  padding-bottom: 8px;
  color: #7ed957;
  border-bottom: 2px solid #7ed957;
}

.approach-content p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 24px;
}

/* SOLUTIONS SECTION */
.solutions-section {
  background: url("../images/backgrounds/image1.avif") center/cover no-repeat;
  padding: 80px 20px 100px;
  overflow: visible;
}

.solutions-container {
  max-width: 1200px;
  margin: 0 auto;
  overflow: visible;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  overflow: visible;
}

@media screen and (max-width: 768px) {
  .solutions-grid {
    grid-template-columns: 1fr;
  }
}

.solution-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: whitesmoke;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.solution-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  z-index: 5;
}

.solution-image {
  width: 100%;
  height: 180px;
  object-fit: contain;
}

.solution-title {
  font-size: 20px;
  font-weight: bold;
  color: #1a1a1a;
  margin: 16px;
}

.img-code {
  font-size: 14px;
  color: #555;
  margin: 0 16px 16px;
  flex-shrink: 0;
}

.button-group {
  margin-top: auto;
  display: flex;
  gap: 12px;
  padding: 0 16px 16px;
}

.read-more-btn {
  flex: 1;
  background-color: #fff;
  border: none;
  color: #7DB0E8;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 0;
  border: #7DB0E8 2px solid;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

@keyframes flashBlue {

  0%,
  100% {
    background-color: #7DB0E8;
    box-shadow: 0 0 5px rgba(125, 176, 232, 0.7);
  }

  50% {
    background-color: #4A90E2;
    box-shadow: 0 0 15px rgba(74, 144, 226, 0.9);
  }
}

.read-more-btn:hover {
  animation: flashBlue 1.2s ease-in-out infinite;
  color: #fff;
}

.download-btn {
  border: 2px solid #7ed957;
  background-color: #fff;
  color: #7ed957;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.download-btn:hover {
  background-color: #7ed957;
  color: #f5f5f5;
}

/* MODAL */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 100;
}

.modal.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.modal-dialog {
  position: relative;
  background: whitesmoke;
  width: 90%;
  max-width: 600px;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
  opacity: 0;
  animation: fadeInScale 0.3s forwards ease-out;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #333;
}

.modal-body {
  padding: 1.5rem;
  max-height: 90vh;
  overflow: auto;
}

@keyframes fadeInScale {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* —————————————————————
   COMMUNAL MODAL: Preserving Header & Close Button
   ————————————————————— */

/* 1) Make dialog large & a flex-column */
#communal-modal .modal-dialog {
  width: 95vw;
  max-width: 1200px;
  height: 95vh;
  display: flex;
  flex-direction: column;
}

#communal-modal .modal-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: whitesmoke;
}

#communal-modal-content {
  position: relative;
  flex: 1;
  overflow: hidden;
}

#communal-modal-content iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border: none;
}