/* ============================================================
   LAYOUT + TYPOGRAPHY
   Clean, SEO.com-like rhythm + Cosmic surfaces
============================================================ */

.cc-container{
  width: min(100% - 36px, var(--cc-container));
  margin-inline: auto;
}

.cc-container--wide{
  width: min(100% - 36px, var(--cc-container-wide));
  margin-inline: auto;
}

.cc-main{
  position: relative;
  z-index: 1;
}

/* Glass surface card */
.cc-surface{
  background: var(--cc-glass);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
}

.cc-entry{
  margin: 28px 0 0;
}

.cc-entry__inner{
  padding: 38px 22px;
  max-width: var(--cc-content);
  margin-inline: auto;
}

@media(max-width: 720px){
  .cc-entry__inner{ padding: 28px 18px; }
}

/* Page hero */
.cc-page-hero{
  padding: 86px 0 18px;
}

.cc-page-hero .cc-container{
  position: relative;
}

.cc-page-title{
  margin: 0;
  font-family: var(--cc-font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(38px, 4vw, 64px);
  color: rgba(255,255,255,0.96);
}

.cc-page-subtitle{
  margin-top: 12px;
  max-width: 68ch;
  color: rgba(255,255,255,0.74);
}

.cc-accent{
  background: linear-gradient(120deg, var(--cc-orange), #facc15, var(--cc-cyan), var(--cc-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Blog meta */
.cc-post-meta{
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

.cc-meta-divider{ opacity: 0.65; margin: 0 6px; }

/* Content typography */
.cc-entry__inner h1,
.cc-entry__inner h2,
.cc-entry__inner h3,
.cc-entry__inner h4,
.cc-entry__inner h5,
.cc-entry__inner h6{
  font-family: var(--cc-font-display);
  color: rgba(255,255,255,0.96);
  line-height: 1.12;
  margin: 1.6em 0 0.55em;
}
.cc-entry__inner h1{ font-size: clamp(32px, 3vw, 44px); }
.cc-entry__inner h2{ font-size: clamp(26px, 2.4vw, 36px); }
.cc-entry__inner h3{ font-size: 24px; }
.cc-entry__inner h4{ font-size: 20px; }
.cc-entry__inner h5{ font-size: 18px; }
.cc-entry__inner h6{ font-size: 16px; }

.cc-entry__inner p,
.cc-entry__inner li{
  color: rgba(229,231,235,0.92);
}

.cc-entry__inner p{ margin: 0.9em 0; }

.cc-entry__inner a{
  color: rgba(34,211,238,0.95);
  text-decoration-color: rgba(34,211,238,0.35);
  text-underline-offset: 4px;
}
.cc-entry__inner a:hover{
  color: rgba(249,115,22,0.95);
  text-decoration-color: rgba(249,115,22,0.45);
}

.cc-entry__inner ul,
.cc-entry__inner ol{ padding-left: 1.25em; }

.cc-entry__inner hr{
  border: 0;
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 2em 0;
}

/* Blockquote */
.cc-entry__inner blockquote{
  border-left: 4px solid rgba(34,211,238,0.65);
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 1.6em 0;
}

/* Code */
.cc-entry__inner code,
.cc-entry__inner pre{
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: rgba(255,255,255,0.92);
}
.cc-entry__inner pre{ padding: 14px 16px; overflow:auto; }
.cc-entry__inner code{ padding: 0.15em 0.35em; }

/* Tables */
.cc-entry__inner table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
}
.cc-entry__inner th,
.cc-entry__inner td{
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding: 12px 12px;
}
.cc-entry__inner th{
  text-align: left;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.04);
}

/* Post cards (archive/search/index) */
.cc-post-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}
@media(max-width: 980px){
  .cc-post-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width: 640px){
  .cc-post-grid{ grid-template-columns: 1fr; }
}

.cc-post-card{ overflow: hidden; }
.cc-post-card__link{
  display: block;
  padding: 18px 18px 16px;
  text-decoration: none;
}
.cc-post-card__title{
  margin: 0 0 8px;
  font-family: var(--cc-font-display);
  font-size: 20px;
  line-height: 1.2;
}
.cc-post-card__meta{ margin: 0 0 10px; font-size: 13px; color: rgba(255,255,255,0.60); }
.cc-post-card__excerpt{ margin: 0 0 12px; color: rgba(229,231,235,0.86); }
.cc-post-card__cta{ color: rgba(34,211,238,0.95); font-weight: 700; }
.cc-post-card__link:hover .cc-post-card__cta{ color: rgba(249,115,22,0.95); }

/* Pagination */
.cc-pagination{ margin: 28px 0 12px; }
.cc-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.86);
  margin: 0 4px;
}
.cc-pagination .page-numbers.current{
  background: radial-gradient(circle at 0% 0%, rgba(34,211,238,0.22), rgba(124,58,237,0.20));
  border-color: rgba(34,211,238,0.35);
}

/* Post navigation */
.cc-post-nav{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 0;
}
.cc-post-nav a{ text-decoration: none; color: rgba(255,255,255,0.80); }
.cc-post-nav a:hover{ color: rgba(34,211,238,0.95); }

/* Tags */
.cc-entry__footer{ margin-top: 18px; }
.cc-tags{ display:flex; flex-wrap:wrap; gap: 8px; align-items:center; }
.cc-tags__label{ color: rgba(255,255,255,0.65); font-size: 14px; }
.cc-tags a{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  text-decoration:none;
  font-size: 14px;
}
.cc-tags a:hover{ border-color: rgba(34,211,238,0.45); }

/* Comments wrapper */
.cc-comments{ margin-top: 18px; }

/* Search form */
.cc-search{
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.cc-search__field{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.28);
  color: rgba(255,255,255,0.92);
}
.cc-search__submit{
  padding: 12px 14px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  color: rgba(10,10,16,0.95);
  background: linear-gradient(135deg, rgba(244,114,182,0.95), rgba(34,211,238,0.88));
}