/* =============================
   Base Reset & Body
============================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root{
  --page-pad: 20px;     /* matches .section horizontal padding */
  --card-gap: 12px;     /* gap between cards */
  --container-max: 1200px;
}
html, body { height: 100%; }
body { font-family: Arial, sans-serif; background:#fff; color:#333; line-height:1.6; }
img { max-width: 100%; display: block; }

/* Centered page container (optional: wrap <main> with class="container") */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 5px; }

/* =============================
   Header
============================= */
.main-header {
  background:#fff;
  padding: 10px 20px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
  position: sticky; top: 0; z-index: 10;
}
.left-section { display:flex; align-items:center; }
.logo { height: 40px; margin-right:10px; }
.channel-name { font-size:18px; font-weight:700; }

/* =============================
   Navigation
============================= */
.right-section { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.nav-link{
  text-decoration:none; color:#333; font-weight:700;
  padding:6px 10px; border-radius:6px; white-space:nowrap;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.nav-link:hover{ background-color:#e0e0e0; color:#111; transform:translateY(-2px); }
.amazon-link{ background:#FF9900; color:#fff; }
.airbnb-link{ background:#FF5A5F; color:#fff; }
.redbus-link{ background:#D32F2F; color:#fff; }
.contact-link{ background:#25D366; color:#fff; opacity:.9; }

/* =============================
   Sections & Headers
============================= */
.section { margin: 40px 0; padding: 0 var(--page-pad); }
.section-header{
  display:flex; justify-content:space-between; align-items:center;
  margin: 10px 0 16px; padding: 0 8px;
}
.section-header h2{ font-size:24px; font-weight:700; color:#222; }
.see-all{ text-decoration:none; color:#007bff; font-weight:700; font-size:15px; }
.see-all:hover{ text-decoration: underline; }

/* =============================
   Horizontal Cards
============================= */
.card-container{
  display:flex; overflow-x:auto; gap: var(--card-gap);
  padding-bottom: 12px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width: none;               /* Firefox */
}
.card-container::-webkit-scrollbar{ display:none; }  /* WebKit */

/* Card */
.card{
  display:flex; flex-direction:column; background:#fff; color:inherit; text-decoration:none;
  border-radius:12px; width: 220px; flex: 0 0 auto; scroll-snap-align:start;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.18); }

/* Media block */
.card img{
  width:100%;
  aspect-ratio: 4 / 3;      /* keeps rows tidy */
  object-fit: cover;
  border-radius:12px 12px 0 0;
}
.card img[data-fit="contain"]{
  object-fit: contain;      /* for PNG/product shots */
  background:#fff;
}

/* Text */
.card .info{ padding:10px; }
.title{
  font-size:16px; font-weight:600; color:#333; margin:4px 0;
  line-height:1.3; overflow:hidden;               /* fallback clip */
  max-height: calc(1.3em * 2);                    /* approx 2 lines */
}
/* Better multi-line clamp where supported */
@supports (-webkit-line-clamp: 2) or (line-clamp: 2){
  .title{
    display:-webkit-box; -webkit-box-orient:vertical;
    -webkit-line-clamp:2; line-clamp:2;
    max-height: unset;
  }
}
.location{ font-size:14px; color:#666; }

/* =============================
   Footer
============================= */
.footer{
  text-align:center; padding:24px var(--page-pad);
  background:#fafafa; border-top:1px solid #ddd; margin-top:40px;
}
.footer-icons{
  display:flex; justify-content:center; align-items:center;
  gap:18px; margin:8px 0 0;
}
.footer-icons a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
}
.footer-icons img{ width:24px; height:24px; }
.copyright{
  margin-top: 10px;
  font-size: 14px;
  color: #444;
  line-height: 1.5;
}
.disclaimer{ margin-top:6px; font-size:10px; color:#666; }

/* =============================
   Responsive
============================= */
@media (max-width: 768px){
  .main-header{ flex-direction:column; align-items:flex-start; gap:10px; }
  .right-section{ justify-content:center; }

  .section{ margin:24px 0; }

  .nav-link {
    font-size: clamp(12px, 3.6vw, 14px);
    font-weight: 600;           
    padding: 6px 10px;          
    line-height: 1;
    border-radius: 6px;
  }

  /* Show ~3 cards in viewport (accounts for page padding + 2 gaps) */
  .card{
    width: clamp(
      110px,
      calc((100vw - (var(--page-pad) * 2) - (var(--card-gap) * 2)) / 3),
      200px
    );
  }

  .title{ font-size:14px; }
  .location{ font-size:12px; }
  .copyright{ font-size: 13px; }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  .nav-link, .card{ transition: none; }
}