/* CNA - Final responsive layout */

/* =========================
   TABLET / iPad
   ========================= */
@media (min-width:761px) and (max-width:1180px){

  html,body{
    width:100%;
    max-width:100%;
    overflow-x:clip;
  }

  .container{
    width:calc(100% - 36px);
    max-width:100%;
  }

  .topbar{
    min-height:auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(280px,420px) auto;
    align-items:center;
    gap:18px;
    padding:16px 0!important;
  }

  .brand{
    min-width:0!important;
    gap:12px!important;
  }

  .brand img{
    width:84px!important;
    height:84px!important;
  }

  .brand h1{
    font-size:1.65rem!important;
    line-height:1.25;
  }

  .brand small{
    font-size:.82rem!important;
  }

  .search{
    order:initial!important;
    max-width:none!important;
    margin:0!important;
    width:100%;
  }

  .datetime{
    display:none!important;
  }

  .header-tools{
    justify-content:flex-end;
    flex-wrap:wrap;
  }

  .nav{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px!important;
    overflow:hidden!important;
  }

  .nav a{
    min-width:0!important;
    white-space:normal!important;
    text-align:center;
    padding:15px 7px!important;
    font-size:.94rem!important;
    line-height:1.4;
  }

  .ticker-wrap{
    padding:8px 0 4px!important;
  }

  .news-ticker .ticker-sequence{
    padding-top:10px!important;
    padding-bottom:10px!important;
    gap:24px!important;
  }

  .news-ticker .ticker-item{
    font-size:.92rem!important;
  }

  .hero{
    padding:22px 0!important;
  }

  .slider{
    height:520px!important;
    min-height:520px!important;
    max-height:520px!important;
  }

  .slide-media{
    inset:18px!important;
  }

  .slide-copy,
  html[lang=en] .slide-copy{
    width:min(560px,58%)!important;
    max-width:58%!important;
    right:5%!important;
    left:auto!important;
    bottom:7%!important;
    padding:17px 19px!important;
  }

  html[lang=en] .slide-copy{
    left:5%!important;
    right:auto!important;
  }

  .slider-render .slide-copy h2,
  .slide-copy.size-small h2,
  .slide-copy.size-medium h2,
  .slide-copy.size-large h2{
    font-size:1.42rem!important;
    line-height:1.5!important;
    margin:9px 0!important;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
  }

  .slide-copy .meta{
    font-size:.78rem!important;
    margin-bottom:9px!important;
  }

  .cta{
    padding:8px 12px!important;
    font-size:.88rem!important;
  }

  .slider-arrow{
    width:44px!important;
    height:44px!important;
  }

  .cards-grid,
  .preview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px!important;
  }

  .content-card{
    min-height:0!important;
  }

  .content-card .thumb{
    height:auto!important;
    aspect-ratio:16/10;
  }

  .archive-item{
    grid-template-columns:140px minmax(0,1fr) 55px!important;
  }

  .archive-item img{
    height:115px!important;
  }

  .home-contact-premium,
  .contact-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================
   MOBILE
   ========================= */
@media (max-width:760px){

  html,body{
    width:100%;
    max-width:100%;
    overflow-x:clip!important;
  }

  .container{
    width:calc(100% - 18px)!important;
    max-width:100%!important;
  }

  .site-header{
    position:relative!important;
    width:100%;
  }

  .topbar{
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:11px!important;
    padding:14px 0!important;
  }

  .brand{
    width:100%;
    min-width:0!important;
    justify-content:center!important;
    gap:10px!important;
    text-align:center;
  }

  .brand img{
    width:64px!important;
    height:64px!important;
  }

  .brand h1{
    font-size:1.3rem!important;
    line-height:1.25!important;
  }

  .brand small{
    font-size:.72rem!important;
    margin-top:3px!important;
  }

  .datetime{
    display:none!important;
  }

  .header-tools{
    order:2!important;
    width:100%;
    justify-content:center!important;
    gap:9px!important;
  }

  .tool-btn{
    min-width:48px;
    padding:8px 11px!important;
  }

  .search{
    order:3!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    flex-basis:auto!important;
  }

  .search input{
    min-height:48px!important;
    font-size:.92rem!important;
    padding-block:11px!important;
  }

  .nav-wrap{
    overflow:hidden!important;
  }

  .nav{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:3px!important;
    width:100%!important;
    overflow:visible!important;
    padding:4px 0!important;
  }

  .nav a{
    min-width:0!important;
    white-space:normal!important;
    text-align:center!important;
    font-size:.77rem!important;
    line-height:1.35!important;
    padding:10px 3px!important;
    border-radius:7px!important;
  }

  .nav a:nth-child(1),
  .nav a:nth-child(2),
  .nav a:nth-child(3){
    grid-column:span 2;
  }

  .nav a:nth-child(4),
  .nav a:nth-child(5){
    grid-column:span 3;
  }

  .ticker-wrap{
    padding:7px 0 3px!important;
  }

  .news-ticker{
    border-radius:10px!important;
  }

  .news-ticker .ticker-sequence{
    gap:18px!important;
    padding:8px 18px 8px 0!important;
  }

  .news-ticker .ticker-item{
    font-size:.82rem!important;
    line-height:1.4!important;
    gap:6px!important;
  }

  .news-ticker .ticker-item:not(:last-child):after{
    margin-inline-start:10px!important;
  }

  .hero{
    padding:16px 0 20px!important;
  }

  .slider{
    height:440px!important;
    min-height:440px!important;
    max-height:440px!important;
    border-radius:15px!important;
  }

  .slide-media{
    inset:10px 10px 190px 10px!important;
  }

  .slide-media img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    border-radius:10px!important;
  }

  .slide-copy,
  html[lang=en] .slide-copy{
    left:10px!important;
    right:10px!important;
    bottom:39px!important;
    width:auto!important;
    max-width:none!important;
    padding:12px 13px!important;
    border-radius:11px!important;
    transform:none!important;
  }

  .slider-render .slide-copy h2,
  .slide-copy.size-small h2,
  .slide-copy.size-medium h2,
  .slide-copy.size-large h2{
    font-size:1.05rem!important;
    line-height:1.5!important;
    margin:7px 0!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden!important;
  }

  .slide-copy .meta{
    font-size:.7rem!important;
    margin-bottom:7px!important;
  }

  .kicker{
    padding:4px 8px!important;
    font-size:.69rem!important;
  }

  .cta{
    padding:7px 10px!important;
    font-size:.78rem!important;
  }

  .slider-arrow{
    width:36px!important;
    height:36px!important;
    top:45%!important;
    font-size:.95rem!important;
  }

  html[dir=rtl] .slider-arrow.prev{
    right:7px!important;
  }

  html[dir=rtl] .slider-arrow.next{
    left:7px!important;
  }

  html[dir=ltr] .slider-arrow.prev{
    left:7px!important;
  }

  html[dir=ltr] .slider-arrow.next{
    right:7px!important;
  }

  .dots{
    bottom:13px!important;
    gap:6px!important;
  }

  .dot{
    width:8px!important;
    height:8px!important;
  }

  .home-section,
  .compact-section{
    padding:30px 0!important;
  }

  .section-head{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:8px!important;
    margin-bottom:15px!important;
  }

  .section-head h2,
  .page-hero h1{
    font-size:1.55rem!important;
    line-height:1.35;
  }

  .cards-grid,
  .preview-grid,
  .coverage-grid{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  .content-card{
    min-height:0!important;
  }

  .content-card .thumb,
  .preview-grid .content-card .thumb{
    height:auto!important;
    aspect-ratio:16/10;
  }

  .card-body{
    padding:15px!important;
  }

  .card-body h3{
    font-size:1.03rem!important;
    line-height:1.55!important;
  }

  .archive-item{
    grid-template-columns:100px minmax(0,1fr)!important;
    gap:10px!important;
  }

  .archive-item img{
    width:100px!important;
    height:100px!important;
  }

  .archive-item .type-icon{
    display:none!important;
  }

  .home-contact-premium,
  .contact-grid,
  .premium-contact-card{
    grid-template-columns:1fr!important;
  }

  input,textarea,select,button,img,video,iframe{
    max-width:100%;
  }

  .footer-inner{
    text-align:center!important;
    justify-content:center!important;
    align-items:center!important;
  }
}


/* very small phones */
@media (max-width:390px){

  .brand img{
    width:56px!important;
    height:56px!important;
  }

  .brand h1{
    font-size:1.15rem!important;
  }

  .nav a{
    font-size:.72rem!important;
  }

  .slider{
    height:420px!important;
    min-height:420px!important;
    max-height:420px!important;
  }

  .slide-media{
    inset:9px 9px 185px 9px!important;
  }

  .slider-render .slide-copy h2{
    font-size:.98rem!important;
  }
}

/* ===== FINAL iPad slider correction ===== */
@media (min-width:761px) and (max-width:1180px){

  .hero{
    padding:18px 0 24px!important;
  }

  .slider{
    height:500px!important;
    min-height:500px!important;
    max-height:500px!important;
    overflow:hidden!important;
  }

  .slide-media{
    top:16px!important;
    right:16px!important;
    left:16px!important;
    bottom:auto!important;
    height:300px!important;
    inset-inline:auto!important;
  }

  .slide-media img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
  }

  .slide-copy,
  html[lang=en] .slide-copy{
    position:absolute!important;
    right:5%!important;
    left:5%!important;
    bottom:35px!important;
    width:auto!important;
    max-width:none!important;
    min-height:150px!important;
    padding:16px 18px!important;
    transform:none!important;
  }

  .slider-render .slide-copy h2,
  .slide-copy.size-small h2,
  .slide-copy.size-medium h2,
  .slide-copy.size-large h2{
    font-size:1.28rem!important;
    line-height:1.55!important;
    margin:8px 0!important;
    -webkit-line-clamp:2!important;
  }

  .slide-copy .meta{
    font-size:.75rem!important;
  }

  .slider-arrow{
    top:50%!important;
    transform:translateY(-50%)!important;
  }

  .dots{
    bottom:12px!important;
  }
}

/* iPad landscape */
@media (min-width:1000px) and (max-width:1180px) and (orientation:landscape){

  .slider{
    height:480px!important;
    min-height:480px!important;
    max-height:480px!important;
  }

  .slide-media{
    height:285px!important;
  }

  .slide-copy,
  html[lang=en] .slide-copy{
    right:7%!important;
    left:7%!important;
    bottom:34px!important;
  }

  .slider-render .slide-copy h2{
    font-size:1.22rem!important;
  }
}

/* ===== FINAL PHONE HEADER HEIGHT FIX ===== */
@media (max-width:760px){

  .topbar .brand{
    flex:0 0 auto!important;
    flex-basis:auto!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
  }

  .topbar{
    height:auto!important;
    min-height:0!important;
  }
}

/* ===== MOBILE SLIDER IMAGE SIZE FIX ===== */
@media (max-width:760px){

  .slider{
    height:510px!important;
    min-height:510px!important;
    max-height:510px!important;
  }

  .slide-media{
    top:10px!important;
    right:10px!important;
    left:10px!important;
    bottom:auto!important;
    height:305px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .slide-media img{
    width:auto!important;
    height:100%!important;
    max-width:92%!important;
    max-height:305px!important;
    object-fit:contain!important;
    object-position:center!important;
  }

  .slide-copy,
  html[lang=en] .slide-copy{
    bottom:38px!important;
    min-height:175px!important;
  }
}

@media (max-width:390px){

  .slider{
    height:490px!important;
    min-height:490px!important;
    max-height:490px!important;
  }

  .slide-media{
    height:285px!important;
  }

  .slide-media img{
    max-height:285px!important;
    max-width:94%!important;
  }
}

/* ===== FINAL MOBILE LARGE SLIDER IMAGE ===== */
@media (max-width:760px){

  .slider{
    height:650px!important;
    min-height:650px!important;
    max-height:650px!important;
  }

  .slide-media{
    top:10px!important;
    right:10px!important;
    left:10px!important;
    bottom:auto!important;
    height:420px!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .slide-media img{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:420px!important;
    object-fit:contain!important;
    object-position:center!important;
  }

  .slide-copy,
  html[lang=en] .slide-copy{
    left:10px!important;
    right:10px!important;
    bottom:38px!important;
    width:auto!important;
    max-width:none!important;
    min-height:190px!important;
  }
}

@media (max-width:390px){

  .slider{
    height:625px!important;
    min-height:625px!important;
    max-height:625px!important;
  }

  .slide-media{
    height:395px!important;
  }

  .slide-media img{
    max-height:395px!important;
  }
}

/* ===== FINAL MOBILE IMAGE PROPORTION FIX ===== */
@media (max-width:760px){

  .slider{
    height:720px!important;
    min-height:720px!important;
    max-height:720px!important;
  }

  .slide-media{
    position:absolute!important;
    top:12px!important;
    right:10px!important;
    left:10px!important;
    bottom:auto!important;
    height:440px!important;
    display:flex!important;
    justify-content:center!important;
    align-items:flex-start!important;
    overflow:visible!important;
  }

  .slide-media picture,
  .slide-media a{
    display:flex!important;
    width:100%!important;
    height:auto!important;
    justify-content:center!important;
  }

  .slide-media img{
    display:block!important;
    width:92%!important;
    height:auto!important;
    max-width:92%!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center top!important;
    margin:0 auto!important;
  }

  .slide-copy,
  html[lang=en] .slide-copy{
    left:10px!important;
    right:10px!important;
    bottom:38px!important;
    width:auto!important;
    max-width:none!important;
    min-height:205px!important;
  }
}

@media (max-width:390px){

  .slider{
    height:690px!important;
    min-height:690px!important;
    max-height:690px!important;
  }

  .slide-media{
    height:420px!important;
  }

  .slide-media img{
    width:94%!important;
    max-width:94%!important;
  }
}

/* ===== CNA FINAL PHONE LAYOUT ===== */
@media (max-width:760px){

  /* HEADER / LOGO */
  .topbar{
    padding:12px 0 14px!important;
    gap:10px!important;
  }

  .brand{
    flex:0 0 auto!important;
    min-height:0!important;
    margin:0!important;
    gap:9px!important;
  }

  .brand img{
    width:54px!important;
    height:54px!important;
    object-fit:contain!important;
    flex:0 0 54px!important;
  }

  .brand h1{
    font-size:1.18rem!important;
    line-height:1.2!important;
    margin:0!important;
  }

  .brand small{
    font-size:.68rem!important;
    line-height:1.2!important;
    margin-top:2px!important;
  }

  .header-tools{
    margin:4px 0 2px!important;
  }

  .search{
    margin-top:2px!important;
  }

  /* SLIDER */
  .hero{
    padding:16px 0 22px!important;
  }

  .slider{
    height:560px!important;
    min-height:560px!important;
    max-height:560px!important;
    overflow:hidden!important;
    border-radius:16px!important;
  }

  /* IMAGE AREA */
  .slide-media{
    position:absolute!important;
    top:12px!important;
    left:12px!important;
    right:12px!important;
    bottom:auto!important;
    height:310px!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:13px!important;
  }

  .slide-media picture,
  .slide-media a{
    width:100%!important;
    height:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .slide-media img{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    margin:0!important;
  }

  /* NEWS TEXT */
  .slide-copy,
  html[lang=en] .slide-copy{
    position:absolute!important;
    left:12px!important;
    right:12px!important;
    bottom:38px!important;
    width:auto!important;
    max-width:none!important;
    min-height:185px!important;
    padding:14px 15px!important;
    transform:none!important;
    border-radius:12px!important;
  }

  .slider-render .slide-copy h2,
  .slide-copy.size-small h2,
  .slide-copy.size-medium h2,
  .slide-copy.size-large h2{
    font-size:1.03rem!important;
    line-height:1.55!important;
    margin:7px 0!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
    overflow:hidden!important;
  }

  .slide-copy .meta{
    font-size:.70rem!important;
    margin-bottom:7px!important;
  }

  .kicker{
    font-size:.69rem!important;
    padding:4px 8px!important;
  }

  .cta{
    font-size:.78rem!important;
    padding:7px 10px!important;
  }

  .slider-arrow{
    width:36px!important;
    height:36px!important;
    top:46%!important;
  }

  .dots{
    bottom:13px!important;
  }
}

/* Smaller iPhones */
@media (max-width:390px){

  .brand img{
    width:50px!important;
    height:50px!important;
    flex-basis:50px!important;
  }

  .brand h1{
    font-size:1.10rem!important;
  }

  .slider{
    height:535px!important;
    min-height:535px!important;
    max-height:535px!important;
  }

  .slide-media{
    height:290px!important;
  }

  .slide-copy,
  html[lang=en] .slide-copy{
    min-height:180px!important;
  }
}