/* ============================================
   DESEO TRAVEL — Page-Specific Styles
   Contact, Articles, Destination Pages
   ============================================ */

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-hero {
  height: 50vh; min-height: 350px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background-size: cover; background-position: center;
  position: relative;
}
.contact-hero::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(12, 20, 36, 0.55);
}
.contact-hero h1 { position: relative; z-index: 2; }

.contact-body { padding: var(--section-pad) 0; background: var(--dark-bg); }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  max-width: var(--container); margin: 0 auto; padding: 0 24px;
}
.contact-info h2 { margin-bottom: 16px; }
.contact-info p { color: rgba(255,255,255,0.75); font-size: 16px; }
.contact-info .email-big {
  display: inline-block; font-size: 20px; color: var(--gold);
  margin-top: 12px; text-decoration: underline;
}
.contact-info .email-big:hover { color: var(--gold-hover); }

/* Contact Form */
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form label {
  font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.6);
  display: block; margin-bottom: 6px;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%; padding: 14px 16px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
  color: var(--white); font-family: var(--font-body); font-size: 16px;
  border-radius: 4px; transition: border-color .3s;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none; border-color: var(--gold);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form .btn-submit {
  padding: 14px 40px; background: var(--gold); color: var(--white);
  font-family: var(--font-body); font-size: 16px; font-weight: 500;
  border: none; border-radius: 4px; cursor: pointer;
  transition: background .3s; align-self: flex-start;
}
.contact-form .btn-submit:hover { background: var(--gold-hover); }

/* ============================================
   DESTINATION PAGE TEMPLATE
   ============================================ */
.dest-hero {
  height: 60vh; min-height: 400px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background-size: cover; background-position: center; position: relative;
}
.dest-hero::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(12, 20, 36, 0.45);
}
.dest-hero h1 { position: relative; z-index: 2; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }

.dest-intro { padding: 60px 0; background: var(--dark-bg); text-align: center; }
.dest-intro p {
  max-width: 700px; margin: 0 auto; color: rgba(255,255,255,0.75);
  font-size: 17px; line-height: 1.8;
}

/* Bucket List Grid */
.bucket-list-section { padding: 40px 0 var(--section-pad); background: var(--dark-bg); }
.bucket-list-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  max-width: var(--container); margin: 0 auto; padding: 0 24px;
}
.bucket-item {
  position: relative; overflow: hidden; aspect-ratio: 1; cursor: pointer;
}
.bucket-item img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .5s;
}
.bucket-item::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0.3); transition: background .3s;
}
.bucket-item:hover::after { background: rgba(0,0,0,0.1); }
.bucket-item:hover img { transform: scale(1.06); }
.bucket-item .item-label {
  position: absolute; bottom: 16px; left: 16px; z-index: 2;
  font-family: var(--font-heading); font-size: 16px; color: var(--white);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

/* ============================================
   ARTICLE PAGE TEMPLATE
   ============================================ */
.article-hero {
  height: 50vh; min-height: 350px;
  display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
  position: relative; padding: 60px 0;
}
.article-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,20,36,0.85) 0%, rgba(12,20,36,0.2) 60%);
}
.article-hero .container { position: relative; z-index: 2; }
.article-hero h1 { margin-bottom: 12px; }
.article-meta { font-size: 14px; color: rgba(255,255,255,0.6); }

.article-body {
  padding: 60px 0 var(--section-pad); background: var(--dark-bg);
}
.article-content {
  max-width: 780px; margin: 0 auto; padding: 0 24px;
}
.article-content h2 { margin: 40px 0 16px; font-size: 28px; }
.article-content h3 { margin: 30px 0 12px; font-size: 22px; }
.article-content p { color: rgba(255,255,255,0.8); font-size: 17px; line-height: 1.9; }
.article-content img {
  width: 100%; border-radius: 4px; margin: 24px 0;
}
.article-content ul, .article-content ol {
  margin: 16px 0; padding-left: 24px;
}
.article-content li {
  color: rgba(255,255,255,0.8); font-size: 17px; line-height: 1.8;
  margin-bottom: 8px; list-style: disc;
}

/* ============================================
   PAGE-LEVEL RESPONSIVE
   ============================================ */
@media (max-width: 992px) {
  .contact-grid { grid-template-columns: 1fr; }
  .bucket-list-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .bucket-list-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-hero, .dest-hero { height: 40vh; }
}