/* Shared responsive overrides + mobile drawer for header.
   Applies to every page that loads the Coptas header. */

/* ── Hamburger base (desktop: hidden) ── */
.ch-hamburger { display: none; }
.ch-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }

/* ── Mobile drawer — sempre presente no DOM, visível só quando .open ── */
.ch-mobile-drawer {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: #000; z-index: 500;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 320ms cubic-bezier(.16,.84,.32,1);
  overflow-y: auto;
}
.ch-mobile-drawer.open { transform: translateX(0); }
.ch-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; height: 56px;
  border-bottom: 1px solid #1a1a1a; flex-shrink: 0;
}
.ch-drawer-close { background: transparent; border: none; color: #fff; cursor: pointer; padding: 8px; }
.ch-drawer-nav { display: flex; flex-direction: column; padding: 8px 0; }
.ch-drawer-nav-item {
  color: #fff; text-decoration: none;
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: 28px; letter-spacing: -0.02em;
  padding: 16px 24px; border-bottom: 1px solid #111;
  transition: color 160ms;
  display: flex; align-items: center; justify-content: space-between;
}
.ch-drawer-nav-item:hover { color: #EBB60F; }
.ch-drawer-footer {
  margin-top: auto; padding: 24px;
  border-top: 1px solid #1a1a1a;
  display: flex; flex-direction: column; gap: 12px;
}
.ch-drawer-subscribe {
  background: #EBB60F; color: #000; border: none; border-radius: 4px;
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 14px; padding: 14px 24px; text-align: center;
  text-decoration: none; display: block;
}
.ch-drawer-search {
  color: #8A8A8A; text-decoration: none;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; text-align: center; padding: 8px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  .ch-header { padding: 0 24px; gap: 16px; }
  .ch-nav-item { padding: 22px 8px; font-size: 12px; }
  .ch-hero-inner { padding: 0 24px; grid-template-columns: 1fr 360px; }
  .ch-hero-copy { padding: 48px 32px 48px 0; }
  .ch-top-inner { grid-template-columns: 1.2fr 1fr 1fr; }
  .ch-top-item { padding: 20px; }
  .ch-news { padding: 40px 24px 48px; }
  .ch-news-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .ch-feature-copy { padding: 40px; }
  .ch-feature-title { font-size: 26px; }
  .ch-col-carousel { padding: 0 24px; }
  .ch-col-head { padding: 0 24px 40px; }
  .ch-col-expanded { padding: 40px 24px 48px; }
  .ch-newsletter { padding: 56px 24px; }
  .ch-nl-inner { gap: 48px; }
  .ch-video-section { padding: 48px 24px; }
  .ch-ml-outer { padding: 48px 24px; }
  .ch-footer { padding: 48px 24px 24px; }
  .ch-footer-top { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 28px; }
  .ch-footer-top > div:last-child { display: none; }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  .ch-header { padding: 0 16px; height: 56px; gap: 8px; }
  .ch-nav { display: none; }
  .ch-hamburger {
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: #fff;
    cursor: pointer; padding: 8px;
  }
  .ch-subscribe { font-size: 11px; padding: 7px 12px; }
  .ch-ticker { height: 30px; }
  .ch-ticker-label { font-size: 9px; padding: 0 10px; }
  .ch-ticker-item { font-size: 11px; }
  .ch-hero { min-height: unset; }
  .ch-hero-wire, .ch-hero-wire-right { display: none; }
  .ch-hero-inner {
    display: grid; grid-template-columns: 1fr;
    grid-template-rows: 220px auto;
    padding: 0; min-height: unset; max-width: 100%;
  }
  .ch-hero-img { order: 1; height: 220px; }
  .ch-hero-copy { order: 2; padding: 24px 16px 28px; gap: 12px; }
  .ch-hero-title { font-size: clamp(26px, 6vw, 36px); }
  .ch-hero-sub { font-size: 16px; }
  .ch-top-inner {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 0;
    scrollbar-width: none; max-width: 100%;
  }
  .ch-top-inner::-webkit-scrollbar { display: none; }
  .ch-top-item { flex: 0 0 72vw; scroll-snap-align: start; border-right: 1px solid #ECECEC; padding: 16px; }
  .ch-top-item:last-child { border-right: none; }
  .ch-news { padding: 28px 16px 36px; }
  .ch-news-grid { grid-template-columns: 1fr; gap: 0; }
  .ch-sec-head { margin-bottom: 20px; }
  .ch-card { flex-direction: row; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid #ECECEC; }
  .ch-card-thumb { width: 96px; min-width: 96px; aspect-ratio: 4/3; flex-shrink: 0; }
  .ch-card-body { flex: 1; }
  .ch-card-title { font-size: 15px; }
  .ch-feature { grid-template-columns: 1fr; }
  .ch-feature-img { height: 220px; order: -1; }
  .ch-feature-copy { padding: 24px 16px 28px; gap: 12px; }
  .ch-feature-title { font-size: 24px; }
  .ch-feature-sub { font-size: 15px; }
  .ch-col-section { padding: 40px 0 0; }
  .ch-col-head { padding: 0 16px 24px; }
  .ch-col-arrows { display: none; }
  .ch-col-carousel { padding: 0 16px; overflow-x: auto; }
  .ch-col-track { gap: 16px; }
  .ch-col-card { flex: 0 0 180px; }
  .ch-col-expanded { grid-template-columns: 1fr; padding: 24px 16px 32px; gap: 20px; margin-top: 20px; }
  .ch-col-exp-photo { aspect-ratio: 1/1; max-width: 140px; }
  .ch-col-exp-name { font-size: 22px; }
  .ch-col-exp-article-title { font-size: 20px; }
  .ch-newsletter { padding: 40px 16px; }
  .ch-nl-inner { grid-template-columns: 1fr; gap: 28px; }
  .ch-nl-title { font-size: 26px; }
  .ch-nl-sub { font-size: 16px; }
  .ch-nl-input-row { flex-direction: column; }
  .ch-nl-btn { height: 48px; }
  .ch-video-section { padding: 32px 16px; }
  .ch-video-inner { grid-template-columns: 1fr; gap: 24px; }
  .ch-ml-outer { padding: 36px 16px; }
  .ch-ml-inner { grid-template-columns: 1fr; gap: 36px; }
  .ch-ml-item { grid-template-columns: 28px 1fr 64px; }
  .ch-ml-num { font-size: 22px; }
  .ch-footer { padding: 36px 16px 20px; }
  .ch-footer-top { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .ch-footer-brand { grid-column: 1 / -1; }
  .ch-footer-logo { font-size: 36px; }
  .ch-footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
}

/* ── Small mobile (≤480px) ── */
@media (max-width: 480px) {
  .ch-top-item { flex: 0 0 86vw; }
  .ch-hero-img { height: 200px; }
  .ch-hero-inner { grid-template-rows: 200px auto; }
  .ch-footer-top { grid-template-columns: 1fr; }
  .ch-ml-item { grid-template-columns: 24px 1fr; }
  .ch-ml-item-thumb { display: none; }
  .ch-col-card { flex: 0 0 160px; }
}