/* Filename: /public/css/itinerariesIndex.css */

.its-body{
  font-family: sans-serif;
  background: var(--bg, #F9F9F2);
  color: var(--text-dark, #2F2F2F);
}

.its-wrap{
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 60px;
}

/* Hero */
.its-hero{ margin-top: 10px; padding: 22px 0 10px; }
.its-hero-inner{
  display: grid;
  grid-template-columns: 1.45fr 0.8fr;
  gap: 18px;
  align-items: start;
}

.its-h1{
  margin: 0 0 10px;
  font-size: 2.15rem;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 850;
}
.its-lead{
  margin: 0 0 14px;
  line-height: 1.55;
  color: rgba(47,47,47,.82);
  font-size: 1.03rem;
}

.its-hero-ctas{ display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 12px; }

/* Pills */
.its-mini-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 6px; }
.its-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(46,139,87,.10);
  border: 1px solid rgba(46,139,87,.16);
  color: rgba(47,47,47,.84);
  font-size: 0.92rem;
}
.its-pill i{ color: var(--primary, #2E8B57); }

/* Side card */
.its-sidecard{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:14px 14px 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
}
.its-side-top{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.its-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  font-size: 0.9rem;
  font-weight: 650;
  color: rgba(47,47,47,.84);
}
.its-badge i{ color: var(--primary, #2E8B57); }
.its-badge.subtle{
  background: rgba(46,139,87,.08);
  border-color: rgba(46,139,87,.12);
}
.its-side-text{ margin:0; line-height:1.5; color: rgba(47,47,47,.80); }

/* Section */
.its-section{ margin-top: 18px; padding: 16px 0; }
.its-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.its-h2{
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.its-muted{ margin:0; color: rgba(47,47,47,.72); }

/* Grid cards */
.its-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.its-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding: 14px;
}
.its-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.its-card-title{
  margin:0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.08rem;
}
.its-card-sub{ margin: 6px 0 10px; line-height:1.45; color: rgba(47,47,47,.78); }
.its-tag{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  font-size: 0.85rem;
  font-weight: 650;
  color: rgba(47,47,47,.78);
  white-space: nowrap;
}
.its-card-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 8px; }
.its-link{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
  font-weight: 750;
  color: var(--primary, #2E8B57);
}
.its-link:hover{ text-decoration: underline; }

/* Bottom CTA */
.its-cta{ padding: 18px 0 10px; margin-top: 6px; }
.its-cta-inner{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:16px;
}
.its-cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }

/* Responsive */
@media (max-width: 980px){
  .its-hero-inner{ grid-template-columns: 1fr; }
  .its-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .its-wrap{ width: min(1120px, calc(100% - 24px)); }
  .its-h1{ font-size: 1.85rem; }
  .its-grid{ grid-template-columns: 1fr; }
}

/* Small thumbnail strip */
.its-card-media{
  display: block;
  width: 100%;
  height: 108px;              /* small */
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  margin-bottom: 10px;
  background: rgba(0,0,0,.03);
}

.its-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

.its-card-media:hover img{
  transform: scale(1.05);
  transition: transform .18s ease;
}

@media (max-width: 640px){
  .its-card-media{ height: 96px; }
}