/* Styles for the recommended destinations page */

.hero.hero-destinations {
 background: url('/hero-beach.jpg') center/cover no-repeat;
}

.hero.hero-destinations::after {
 background: linear-gradient(135deg, rgba(15, 44, 63, 0.82), rgba(49, 151, 149, 0.35));
}

.hero.hero-destinations h1 {
 font-size: clamp(2.75rem, 6vw, 5rem);
 margin-bottom: 1.5rem;
}

.hero.hero-destinations .hero-subtitle {
 font-size: clamp(1.1rem, 2.1vw, 1.5rem);
 margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.destinations-intro {
 background: #f7f9f9;
 padding: clamp(2px, 10vw, 110px) 0;
}

.destinations-intro .container,
.destinations-grid .container,
.destinations-tips .container,
.cta-banner .container {
 max-width: 1240px;
 margin: 0 auto;
 padding: 0 clamp(16px, 5vw, 48px);
}

.intro-grid {
 display: grid;
 gap: clamp(32px, 6vw, 48px);
 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
 align-items: start;
}

.intro-text h2 {
 font-size: clamp(2rem, 4vw, 2.75rem);
 margin-bottom: 1rem;
 color: #2f2c2c;
}

.intro-text p {
 margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
 line-height: 1.7;
 color: #4a4a4a;
}

.intro-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: 0.75rem;
}

.intro-list li {
 position: relative;
 padding-left: 32px;
 color: #2f2c2c;
 font-weight: 600;
}

.intro-list li::before {
 content: '';
 position: absolute;
 left: 0;
 top: 0.9rem;
 transform: translateY(-50%);
 width: 16px;
 height: 16px;
 border-radius: 50%;
 background: linear-gradient(135deg, #2c7a7b, #f15b26);
 box-shadow: 0 4px 12px rgba(44, 122, 123, 0.35);
}

.intro-card {
 background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
 border-radius: 28px;
 padding: clamp(24px, 5vw, 36px);
 box-shadow: 0 24px 55px rgba(15, 44, 63, 0.12);
 border: 1px solid rgba(255, 255, 255, 0.6);
 backdrop-filter: blur(14px);
 text-align: center;
}

.intro-card h3 {
 color: #2c7a7b;
 margin-bottom: 1rem;
 font-size: 1.5rem;
}

.intro-card p {
 margin-bottom: 1.5rem;
 color: #4a4a4a;
}

.intro-card .cta-link {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 color: #f15b26;
 font-weight: 600;
 text-decoration: none;
}

.intro-card .cta-link::after {
 content: '→';
 transition: transform 0.3s ease;
}

.intro-card .cta-link:hover::after {
 transform: translateX(4px);
}

.destinations-grid {

 background: #ffffff;
}

.destinations-grid .section-title {
 font-size: clamp(2.25rem, 4vw, 3rem);
 margin-bottom: 1rem;
 color: #2f2c2c;
}

.destinations-grid .section-subtitle {
 max-width: 700px;
 margin: 0 auto clamp(48px, 8vw, 72px);
 font-size: 1.125rem;
 line-height: 1.7;
 color: #4a4a4a;
}

.destination-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: clamp(24px, 4vw, 36px);
}

.destination-card {
 background: #fff;
 border-radius: 24px;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 box-shadow: 0 25px 60px rgba(15, 44, 63, 0.12);
 transition: transform 0.35s ease, box-shadow 0.35s ease;
 border: 1px solid rgba(44, 122, 123, 0.08);
 text-align: left;
}

.destination-card:hover {
 transform: translateY(-8px);
 box-shadow: 0 35px 80px rgba(15, 44, 63, 0.18);
}

.card-image {
 position: relative;
 padding-top: 62%;
 overflow: hidden;
}

.card-image img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.5s ease;
}

.destination-card:hover .card-image img {
 transform: scale(1.06);
}

.card-body {
 padding: clamp(20px, 4vw, 28px);
 display: flex;
 flex-direction: column;
 gap: 1rem;
 flex: 1;
}

.card-body h3 {
 font-size: 1.5rem;
 margin: 0;
 color: #2f2c2c;
}

.card-body p {
 flex: 1;
 margin: 0;
 color: #4a4a4a;
 line-height: 1.6;
}

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

.more-link {
 color: #2c7a7b;
 font-weight: 600;
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
}

.more-link::after {
 content: '↗';
 font-size: 1rem;
 transition: transform 0.3s ease;
}

.more-link:hover::after {
 transform: translate(3px, -3px);
}

.cta-outline {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 0.6rem 1.6rem;
 border-radius: 999px;
 border: 1.5px solid rgba(44, 122, 123, 0.45);
 color: #2c7a7b;
 font-weight: 600;
 text-decoration: none;
 transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.cta-outline:hover {
 background: linear-gradient(to right, #2c7a7b, #319795);
 color: #ffffff;
 border-color: transparent;
}

.destinations-tips {
 background: #f7f9f9;
 padding: clamp(64px, 12vw, 120px) 0;
}

.tips-card {
 background: #ffffff;
 border-radius: 28px;
 padding: clamp(32px, 6vw, 48px);
 box-shadow: 0 24px 60px rgba(15, 44, 63, 0.12);
 display: grid;
 gap: clamp(28px, 6vw, 42px);
}

.tips-card h2 {
 margin: 0;
 text-align: center;
 font-size: clamp(2rem, 4vw, 2.5rem);
 color: #2f2c2c;
}

.tips-grid {
 display: grid;
 gap: clamp(24px, 4vw, 36px);
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tip {
 background: rgba(76, 194, 192, 0.08);
 border-radius: 20px;
 padding: clamp(20px, 4vw, 28px);
}

.tip h3 {
 margin-bottom: 0.75rem;
 font-size: 1.25rem;
 color: #2c7a7b;
}

.tip p {
 margin: 0;
 line-height: 1.6;
 color: #4a4a4a;
}

.cta-banner {
 position: relative;
 overflow: hidden;
 padding: clamp(72px, 12vw, 120px) 0;
 color: #ffffff;
 background: linear-gradient(135deg, rgba(14, 42, 71, 0.95), rgba(76, 194, 192, 0.95));
}

.cta-banner::before {
 content: '';
 position: absolute;
 inset: 0;
 background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.25), transparent 55%),
 radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.18), transparent 60%);
}

.cta-banner .container {
 position: relative;
 z-index: 1;
 text-align: center;
}

.cta-banner h2 {
 font-size: clamp(2.125rem, 4vw, 2.75rem);
 margin-bottom: 1rem;
}

.cta-banner p {
 font-size: 1.125rem;
 margin: 0 auto 2rem;
 max-width: 680px;
 line-height: 1.7;
}

.cta-buttons {
 display: flex;
 gap: 1rem;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
}

.cta-buttons .hero-btn {
 border-radius: 999px;
 padding: 16px 36px;
}

.cta-banner .cta-outline {
 color: #ffffff;
 border-color: rgba(255, 255, 255, 0.65);
}

.cta-banner .cta-outline:hover {
 background: rgba(255, 255, 255, 0.12);
 color: #ffffff;
}

@media (max-width: 767px) {
 .hero.hero-destinations {
 min-height: 70vh;
 padding-bottom: clamp(160px, 28vh, 200px);
 }

 .card-body h3 {
 font-size: 1.375rem;
 }
}