/* =========================================================
   City Choice Guides — scoped under .cc-guides
   Visually consistent with citychoice-blog brand language.
   ========================================================= */

.cc-guides{
  --cc-green:#258C5E;
  --cc-green-2:#1EAC59;
  --cc-green-deep:#1b6a47;
  --cc-orange:#DE832A;
  --cc-orange-2:#E55E30;
  --cc-gold:#F8BD39;
  --cc-ink:#474747;
  --cc-ink-2:#6c6f72;
  --cc-line:#E2E2E2;
  --cc-bg:#F1F1F1;
  --cc-soft:#F7F7F7;
  --cc-shadow:0 6px 10px rgba(0,0,0,.10);

  font-family:"Poppins","Roboto",system-ui,sans-serif;
  color:var(--cc-ink);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.cc-guides *,
.cc-guides *::before,
.cc-guides *::after{ box-sizing:border-box }
.cc-guides a{ color:var(--cc-green); text-decoration:none }
.cc-guides a:hover{ color:var(--cc-green-deep) }

/* ---------- Page header / hero ---------- */
.cc-guides .page-strip{
  background:linear-gradient(225deg,var(--cc-green-2) 0%,var(--cc-green) 100%);
  color:#fff; padding:64px 24px 70px; text-align:center;
}
.cc-guides .page-strip .eyebrow{
  display:inline-block; font-size:12px; letter-spacing:1.4px;
  text-transform:uppercase; opacity:.92; font-weight:600;
  background:rgba(255,255,255,.14); padding:6px 14px; border-radius:100px;
  margin-bottom:14px;
}
.cc-guides .page-strip h1{
  margin:0; font-family:"Poppins",sans-serif;
  font-size:44px; font-weight:600; line-height:1.15; color:#fff; letter-spacing:.2px;
  max-width:880px; margin-inline:auto;
}
.cc-guides .page-strip .lede{
  margin:14px auto 0; max-width:680px;
  font-size:16px; line-height:1.6; opacity:.95;
}
.cc-guides .page-strip .meta{
  display:inline-flex; align-items:center; gap:14px; margin-top:18px;
  font-size:13px; opacity:.92; flex-wrap:wrap; justify-content:center;
}
.cc-guides .page-strip .meta span{ display:inline-flex; align-items:center; gap:6px }
.cc-guides .page-strip .meta .dot{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.55) }
.cc-guides .page-strip .crumbs{ margin-top:16px; font-size:13px; opacity:.9 }
.cc-guides .page-strip .crumbs a{ color:#fff; text-decoration:underline; text-underline-offset:3px }

/* ---------- Main / archive ---------- */
.cc-guides main.cc-main{ max-width:1200px; margin:0 auto; padding:42px 24px 70px; background:#fff }

.cc-guides .toolbar{
  display:flex; justify-content:space-between; align-items:center;
  gap:18px; flex-wrap:wrap; margin-bottom:36px;
}
.cc-guides .search{
  position:relative; display:flex; align-items:center;
  background:#fff; border:1px solid var(--cc-line); border-radius:100px;
  padding:6px 6px 6px 44px; min-width:280px; max-width:380px; flex:1;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.cc-guides .search .icon{
  position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--cc-ink-2); display:inline-flex;
}
.cc-guides .search input[type=search]{
  flex:1; border:0; background:transparent; outline:none;
  font:inherit; font-size:14px; color:var(--cc-ink); padding:8px 0;
}
.cc-guides .search button{
  border:0; background:linear-gradient(225deg,var(--cc-gold) 0%,var(--cc-orange-2) 100%);
  color:#fff; font:inherit; font-weight:500; font-size:13px; letter-spacing:.4px;
  padding:9px 18px; border-radius:100px; cursor:pointer;
  box-shadow:0 4px 10px rgba(229,94,48,.18);
}

.cc-guides .chips{ display:flex; gap:8px; flex-wrap:wrap }
.cc-guides .chip{
  display:inline-flex; align-items:center; padding:8px 16px;
  background:#fff; border:1px solid var(--cc-line); color:var(--cc-ink);
  border-radius:100px; font-size:13px; font-weight:500; letter-spacing:.2px;
  transition:background .15s, color .15s, border-color .15s;
}
.cc-guides .chip:hover{ border-color:var(--cc-green); color:var(--cc-green) }
.cc-guides .chip.is-active{ background:var(--cc-green); color:#fff; border-color:var(--cc-green) }

/* ---------- Cards grid ---------- */
.cc-guides .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px }

.cc-guides .card{
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:var(--cc-shadow);
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cc-guides .card:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,.14) }
.cc-guides .card .thumb{
  aspect-ratio:16/10; background:#cdd3da center/cover no-repeat;
  position:relative; display:block;
}
.cc-guides .card .thumb .badge{
  position:absolute; top:14px; left:14px;
  background:linear-gradient(225deg,var(--cc-gold) 0%,var(--cc-orange-2) 100%);
  color:#fff; font-size:11px; font-weight:600; letter-spacing:.6px;
  padding:6px 12px; border-radius:100px; text-transform:uppercase;
  box-shadow:0 4px 10px rgba(229,94,48,.28);
}
.cc-guides .card .body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1 }
.cc-guides .card .tag{
  align-self:flex-start;
  background:rgba(37,140,94,.10); color:var(--cc-green);
  font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase;
  padding:4px 10px; border-radius:4px;
}
.cc-guides .card h3{
  font-family:"Poppins",sans-serif;
  font-weight:600; font-size:19px; line-height:1.32; margin:0; color:#1d1d1d; letter-spacing:.1px;
}
.cc-guides .card h3 a{ color:inherit }
.cc-guides .card h3 a:hover{ color:var(--cc-green) }
.cc-guides .card .meta{ display:flex; align-items:center; gap:14px; color:var(--cc-ink-2); font-size:12px }
.cc-guides .card .meta span{ display:inline-flex; align-items:center; gap:6px }
.cc-guides .card .meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--cc-line) }
.cc-guides .card p{
  margin:0; color:var(--cc-ink-2); font-size:14px; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cc-guides .read-more{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  color:#fff !important;
  background:linear-gradient(225deg,var(--cc-gold) 0%,var(--cc-orange-2) 100%);
  padding:10px 22px; border-radius:100px; font-weight:500; font-size:13px; letter-spacing:.4px;
  align-self:flex-start; transition:transform .15s, box-shadow .15s;
  box-shadow:0 4px 10px rgba(229,94,48,.18);
}
.cc-guides .read-more:hover{ transform:scale(1.04); color:#fff !important; box-shadow:0 6px 14px rgba(229,94,48,.28) }
.cc-guides .read-more::after{ content:"→"; font-size:15px; line-height:1; transform:translateY(-1px) }

/* Featured (first) card spans 2 cols */
.cc-guides .card.featured{ grid-column:span 2; flex-direction:row }
.cc-guides .card.featured .thumb{ aspect-ratio:auto; flex:1.1; min-height:340px }
.cc-guides .card.featured .body{ flex:1; padding:32px }
.cc-guides .card.featured h3{ font-size:26px; line-height:1.25 }
.cc-guides .card.featured p{ -webkit-line-clamp:4 }

/* Empty state */
.cc-guides .empty{
  grid-column:1 / -1;
  background:var(--cc-soft); border:1px dashed var(--cc-line); border-radius:16px;
  padding:80px 32px; text-align:center; color:var(--cc-ink-2);
}
.cc-guides .empty h2{
  margin:0 0 8px; font-family:"Poppins",sans-serif; font-weight:600; font-size:26px; color:var(--cc-ink);
}
.cc-guides .empty p{ margin:0; font-size:15px; line-height:1.55; color:var(--cc-ink-2) }

/* Pagination */
.cc-guides .pagination{ display:flex; justify-content:center; gap:8px; margin-top:50px; flex-wrap:wrap }
.cc-guides .pagination a,
.cc-guides .pagination span{
  min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--cc-line); border-radius:100px;
  font-weight:500; color:var(--cc-ink); font-size:13px; padding:0 16px; letter-spacing:.4px;
  text-decoration:none;
}
.cc-guides .pagination .current{ background:var(--cc-green); color:#fff; border-color:var(--cc-green) }
.cc-guides .pagination a:hover{ border-color:var(--cc-green); color:var(--cc-green) }

/* CTA band */
.cc-guides .cta-band{
  background:linear-gradient(225deg,var(--cc-green-2) 0%,var(--cc-green) 100%);
  color:#fff; padding:48px 24px; text-align:center;
}
.cc-guides .cta-band h2{ margin:0; font-family:"Poppins",sans-serif; font-size:32px; font-weight:600; letter-spacing:.2px; color:#fff }
.cc-guides .cta-band p{ margin:8px auto 22px; max-width:560px; font-size:16px; opacity:.95 }
.cc-guides .cta-band .btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:100px;
  background:linear-gradient(225deg,var(--cc-gold) 0%,var(--cc-orange-2) 100%);
  color:#fff !important; font-weight:500; letter-spacing:.4px; font-size:16px;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  text-decoration:none; transition:transform .15s;
}
.cc-guides .cta-band .btn:hover{ transform:scale(1.04); color:#fff !important }
.cc-guides .cta-band .btn::before{ content:"☎"; font-size:16px }

/* =========================================================
   Single guide
   ========================================================= */

.cc-guides.cc-guides-single .article-wrap{
  max-width:1180px; margin:0 auto; padding:42px 24px 70px;
}
.cc-guides.cc-guides-single .featured-img{
  width:100%; aspect-ratio:16/8; object-fit:cover;
  border-radius:18px; display:block; margin-bottom:36px;
  box-shadow:var(--cc-shadow);
}

.cc-guides.cc-guides-single .article-grid{
  display:grid; grid-template-columns:280px minmax(0,1fr); gap:48px; align-items:start;
}
.cc-guides.cc-guides-single .toc-rail{
  position:sticky; top:90px; align-self:start;
  display:flex; flex-direction:column; gap:18px;
}
.cc-guides.cc-guides-single .toc{
  background:var(--cc-soft); border:1px solid var(--cc-line); border-radius:14px;
  padding:18px 18px 14px;
}
.cc-guides.cc-guides-single .toc-title{
  display:flex; align-items:center; gap:8px;
  font-weight:600; color:var(--cc-ink); font-size:13px;
  text-transform:uppercase; letter-spacing:1px; margin-bottom:10px;
}
.cc-guides.cc-guides-single .toc-title svg{ color:var(--cc-green) }
.cc-guides.cc-guides-single .toc ol{
  list-style:none; counter-reset:toc; padding:0; margin:0;
}
.cc-guides.cc-guides-single .toc li{
  counter-increment:toc; position:relative; padding:6px 0 6px 28px;
  border-top:1px solid var(--cc-line); font-size:13px; line-height:1.45;
}
.cc-guides.cc-guides-single .toc li:first-child{ border-top:0 }
.cc-guides.cc-guides-single .toc li::before{
  content:counter(toc, decimal-leading-zero);
  position:absolute; left:0; top:6px;
  font-weight:600; color:var(--cc-green); font-size:12px;
}
.cc-guides.cc-guides-single .toc a{ color:var(--cc-ink) }
.cc-guides.cc-guides-single .toc a:hover{ color:var(--cc-green) }

.cc-guides.cc-guides-single .aside-cta{
  background:linear-gradient(225deg,var(--cc-green-2) 0%,var(--cc-green) 100%);
  color:#fff; border-radius:14px; padding:20px 22px; box-shadow:var(--cc-shadow);
}
.cc-guides.cc-guides-single .aside-cta .aside-eyebrow{
  margin:0 0 6px; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; opacity:.9; font-weight:600;
}
.cc-guides.cc-guides-single .aside-cta p{ margin:0 0 14px; font-size:14px; line-height:1.5; opacity:.95 }
.cc-guides.cc-guides-single .aside-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(225deg,var(--cc-gold) 0%,var(--cc-orange-2) 100%);
  color:#fff !important; font-weight:500; letter-spacing:.4px; font-size:14px;
  padding:10px 20px; border-radius:100px;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}
.cc-guides.cc-guides-single .aside-btn::before{ content:"☎"; font-size:14px }

/* Article body */
.cc-guides.cc-guides-single .article{ min-width:0 }
.cc-guides.cc-guides-single .content{
  font-family:"Roboto Slab","Roboto",Georgia,serif;
  font-size:17px; line-height:1.78; color:var(--cc-ink);
}
.cc-guides.cc-guides-single .content > :first-child{ margin-top:0 }
.cc-guides.cc-guides-single .content h2{
  font-family:"Poppins",sans-serif; font-size:30px; font-weight:600;
  color:#1d1d1d; margin:48px 0 16px; letter-spacing:.1px; scroll-margin-top:90px;
  position:relative; padding-left:18px;
}
.cc-guides.cc-guides-single .content h2::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:5px;
  background:linear-gradient(180deg,var(--cc-green-2),var(--cc-green));
  border-radius:4px;
}
.cc-guides.cc-guides-single .content h3{
  font-family:"Poppins",sans-serif; font-size:22px; font-weight:600;
  color:#1d1d1d; margin:32px 0 12px; scroll-margin-top:90px;
}
.cc-guides.cc-guides-single .content p{ margin:0 0 20px }
.cc-guides.cc-guides-single .content ul,
.cc-guides.cc-guides-single .content ol{ margin:0 0 22px 22px; padding:0 }
.cc-guides.cc-guides-single .content li{ margin-bottom:10px }
.cc-guides.cc-guides-single .content li::marker{ color:var(--cc-green) }
.cc-guides.cc-guides-single .content blockquote{
  margin:28px 0; padding:18px 24px; border-left:4px solid var(--cc-green);
  background:var(--cc-soft); font-style:italic; color:var(--cc-ink);
  border-radius:0 12px 12px 0;
}
.cc-guides.cc-guides-single .content a{
  color:var(--cc-green); text-decoration:underline; text-underline-offset:3px;
}
.cc-guides.cc-guides-single .content img{
  max-width:100%; height:auto; border-radius:14px; margin:18px 0;
  box-shadow:var(--cc-shadow);
}
.cc-guides.cc-guides-single .content strong{ color:#1d1d1d }

/* Topics + share + back */
.cc-guides.cc-guides-single .topics{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:36px 0 0; padding-top:24px; border-top:1px solid var(--cc-line);
}
.cc-guides.cc-guides-single .topics-label{
  font-size:13px; color:var(--cc-ink-2); font-weight:500; margin-right:4px;
}
.cc-guides.cc-guides-single .topic-tag{
  background:var(--cc-soft); color:var(--cc-ink); border:1px solid var(--cc-line);
  font-size:12px; padding:5px 12px; border-radius:100px;
}
.cc-guides.cc-guides-single .topic-tag:hover{ border-color:var(--cc-green); color:var(--cc-green) }

.cc-guides.cc-guides-single .article-actions{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--cc-line); border-bottom:1px solid var(--cc-line);
  padding:20px 0; margin:24px 0 8px; flex-wrap:wrap; gap:18px;
}
.cc-guides.cc-guides-single .share{ display:flex; align-items:center; gap:10px }
.cc-guides.cc-guides-single .share .label{ font-size:13px; color:var(--cc-ink-2); font-weight:500; margin-right:4px }
.cc-guides.cc-guides-single .share a{
  width:36px; height:36px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cc-soft); color:var(--cc-ink);
  transition:background .15s, color .15s, transform .15s;
}
.cc-guides.cc-guides-single .share a:hover{ background:var(--cc-green); color:#fff; transform:translateY(-2px) }
.cc-guides.cc-guides-single .back-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--cc-green); font-weight:500; font-size:14px; letter-spacing:.3px;
}
.cc-guides.cc-guides-single .back-link:hover{ color:var(--cc-green-deep) }

/* Related */
.cc-guides.cc-guides-single .related{
  max-width:1200px; margin:0 auto; padding:30px 24px 70px;
}
.cc-guides.cc-guides-single .related h2{
  font-family:"Poppins",sans-serif; font-size:28px; font-weight:600; color:#1d1d1d;
  margin:0 0 24px; text-align:center;
}
.cc-guides.cc-guides-single .related .grid{ grid-template-columns:repeat(3,1fr) }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px){
  .cc-guides.cc-guides-single .article-grid{ grid-template-columns:1fr; gap:32px }
  .cc-guides.cc-guides-single .toc-rail{ position:static; flex-direction:row; flex-wrap:wrap }
  .cc-guides.cc-guides-single .toc{ flex:1; min-width:280px }
  .cc-guides.cc-guides-single .aside-cta{ flex:1; min-width:280px }
}

@media (max-width: 980px){
  .cc-guides .grid{ grid-template-columns:repeat(2,1fr) }
  .cc-guides .card.featured{ grid-column:span 2; flex-direction:column }
  .cc-guides .card.featured .thumb{ aspect-ratio:16/10; min-height:0; flex:none }
  .cc-guides .card.featured .body{ padding:22px 24px 26px }
  .cc-guides .card.featured h3{ font-size:21px }
  .cc-guides .page-strip h1{ font-size:34px }
  .cc-guides.cc-guides-single .related .grid{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width: 640px){
  .cc-guides .grid{ grid-template-columns:1fr }
  .cc-guides .card.featured{ grid-column:auto }
  .cc-guides main.cc-main{ padding:28px 16px 50px }
  .cc-guides .page-strip{ padding:48px 20px 56px }
  .cc-guides .page-strip h1{ font-size:28px }
  .cc-guides .cta-band h2{ font-size:24px }

  .cc-guides .toolbar{ flex-direction:column; align-items:stretch }
  .cc-guides .search{ max-width:none }

  .cc-guides.cc-guides-single .article-wrap{ padding:28px 16px 50px }
  .cc-guides.cc-guides-single .content{ font-size:16px }
  .cc-guides.cc-guides-single .content h2{ font-size:24px; margin-top:36px }
  .cc-guides.cc-guides-single .content h3{ font-size:19px }
  .cc-guides.cc-guides-single .related .grid{ grid-template-columns:1fr }
  .cc-guides.cc-guides-single .article-actions{ justify-content:flex-start }
}