/* ===============================
   CLEAN RESPONSIVE STYLES (REBUILD — FIXED ORDER)
   Visual hierarchy: H1 (header) -> Cards (grid) -> All text/FAQ/copyright
   =============================== */

/* Base reset */
*{margin:0;padding:0;box-sizing:border-box;}
img{max-width:100%;display:block;}

/* Theme */
:root{
  --bg:#0b0b0f;
  --panel:#13131a;
  --card:#171722;
  --card2:#1c1c28;
  --border:rgba(255,255,255,.08);
  --text:#ffffff;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.58);
  --accent:#ff6b35;
  --radius:18px;
  --radius-sm:14px;
  --shadow:0 12px 28px rgba(0,0,0,.55);
  --max:1100px;
}

/* Page background */
html{scroll-behavior:smooth;}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1000px 600px at 50% 0%, rgba(255,107,53,.14), transparent 60%),
              radial-gradient(900px 700px at 20% 90%, rgba(120,80,255,.14), transparent 55%),
              radial-gradient(900px 700px at 80% 85%, rgba(0,180,255,.10), transparent 55%),
              var(--bg);
  color:var(--text);
  line-height:1.55;
  overflow-x:hidden;
}

/* ===== STRICT VISUAL ORDER — HEADER -> GRID -> EVERYTHING ELSE ===== */
.page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Жёсткий порядок — ничего не ломаем, просто переупорядочиваем визуально */
.ph-header{ order:1; }
main{ order:2; } /* grid с комиксами сразу после header */
.top-seo{ order:3; }
.content-section{ order:4; }
.faq-section{ order:5; }
.copyright{ order:6; }

/* ===== Header ===== */
.ph-header{
  padding:18px 16px 10px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.ph-inner{
  max-width:var(--max);
  margin:0 auto;
}
.ph-text{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;}
.ph-title{
  font-size:clamp(1.6rem, 4.2vw, 2.8rem);
  letter-spacing:.04em;
  font-weight:800;
}
.ph-tagline{
  font-size:clamp(.85rem, 2.2vw, 1rem);
  color:var(--muted);
  max-width:60ch;
}

/* ===== Main / grid ===== */
main{
  padding:18px 0 26px;
}
.comics-grid{
  max-width:var(--max);
  margin:0 auto;
  padding:0 14px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  align-items: start;
}

/* ===== Comic card ===== */
.comic-card{
  align-self: start;
  text-decoration:none;
  color:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}

/* Make image + title stable (no absolute overlays) */
.comic-image{
  display:flex;
  flex-direction:column;
  background:var(--card);
}

/* Image area keeps consistent height via aspect-ratio, title below doesn't get cut */
.comic-image img,
.comic-placeholder{
  width:100%;
  aspect-ratio: 2 / 3;
  object-fit:cover;
  object-position:center;
  height:auto;
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(0,0,0,.35));
}

/* Placeholder */
.comic-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:clamp(1.6rem, 5vw, 2.4rem);
  color:rgba(255,255,255,.35);
}

/* Title block: ALWAYS visible, wraps fully */
.comic-title-overlay{
  position:static !important;
  background:rgba(0,0,0,.55);
  border-top:1px solid rgba(255,255,255,.06);
  padding:10px 10px 12px;
}
.comic-title-overlay h3{
  font-weight:700;
  font-size:clamp(.9rem, 2.4vw, 1.05rem);
  line-height:1.25;
  text-align:center;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:unset !important;
  display:block !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:unset !important;
  word-break:break-word;
  hyphens:auto;
}

/* Touch/hover feedback (safe) */
@media (hover:hover){
  .comic-card{transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;}
  .comic-card:hover{transform:translateY(-2px); border-color:rgba(255,107,53,.45); box-shadow:0 16px 34px rgba(0,0,0,.65);}
}
@media (hover:none){
  .comic-card:active{outline:2px solid rgba(255,107,53,.75); outline-offset:-2px;}
}

/* ===== FAQ ===== */
.faq-section{
  max-width:var(--max);
  margin:18px auto 0;
  padding:0 14px 22px;
}
.faq-section h2{
  text-align:center;
  font-size:clamp(1.4rem, 3.2vw, 2rem);
  margin:18px 0 14px;
}

.faq-item{
  background:rgba(0,0,0,.22);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  margin-bottom:12px;
}
.faq-question{
  padding:16px 16px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  user-select:none;
}
.faq-question h3{
  font-size:clamp(1rem, 2.6vw, 1.1rem);
  font-weight:650;
}
.faq-toggle{
  font-size:1.4rem;
  color:var(--accent);
  line-height:1;
}

/* Collapsible body (works with your JS toggle class) */
.faq-answer{
  max-height:0;
  overflow:hidden;
  padding:0 16px;
  transition:max-height .25s ease, padding .25s ease;
}
.faq-item.active .faq-answer{
  max-height:800px;
  padding:0 16px 14px;
}
.faq-answer p{
  color:var(--muted);
  padding-top:10px;
}

/* ===== TOP SEO ===== */
.top-seo{
  max-width:var(--max);
  margin:0 auto;
  padding:18px 14px 10px;
}
.top-seo{
  background:rgba(0,0,0,.25);
  border-top:1px solid var(--border);
}
.top-seo h2,.top-seo h1{
  text-align:center;
  font-size:clamp(1.15rem, 3vw, 1.6rem);
  margin-bottom:10px;
}
.top-seo p{
  color:var(--muted2);
  font-size:clamp(.85rem, 2.2vw, 1rem);
  line-height:1.6;
  max-width:85ch;
  margin:0 auto;
  text-align:left;
}

/* ===== Copyright ===== */
.copyright{
  max-width:var(--max);
  margin:0 auto 18px;
  padding:14px 14px 0;
  text-align:center;
  color:var(--muted2);
  border-top:1px solid var(--border);
}

/* ===== Small device tuning ===== */
@media (max-width: 520px){
  .comic-title-overlay h3{
    font-size:0.65rem;
    line-height:1.2;
  }
}

/* ===== Reduce motion ===== */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
}


@media (max-width: 600px){
  .comics-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ===============================
   Comic card CTA (READ NOW)
   =============================== */
.comic-title-overlay{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  background:rgba(0,0,0,.72);
  padding:12px 12px 14px;
}

.comic-title-overlay h3{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

/* Button-like CTA */
.comic-btn{
  display:block;
  width:100%;
  text-align:center;
  padding:12px 10px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
  background:linear-gradient(90deg, rgba(105,90,255,1), rgba(200,80,255,1));
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
}

.comic-card:hover .comic-btn{
  filter:brightness(1.08);
}

.comic-card:active .comic-btn{
  transform:translateY(1px);
}

/* ===============================
   MOBILE OPTIMIZATION (ALL SIZES)
   =============================== */
@media (max-width: 768px) {

  .comics-grid{
    gap:14px;
  }

  .comic-card{
    border-radius:18px;
  }

  .comic-card img{
    aspect-ratio: 2 / 3;
    object-fit: cover;
  }

  .comic-title-overlay{
    padding:10px;
    gap:8px;
  }

  .comic-title-overlay h3{
    font-size:13px;
    line-height:1.2;
    -webkit-line-clamp:2;
  }

  .comic-btn{
    padding:9px 8px;
    font-size:12px;
    border-radius:12px;
  }
}

/* SMALL PHONES */
@media (max-width: 390px) {

  .comic-title-overlay h3{
    font-size:12px;
  }

  .comic-btn{
    font-size:11px;
    padding:8px 6px;
  }
}

/* VERY SMALL */
@media (max-width: 360px) {

  .comics-grid{
    gap:10px;
  }

  .comic-btn{
    padding:7px 6px;
  }
}

/* MOBILE TOP TITLE FIX */
@media (max-width: 768px){

  .comic-card{
    position: relative;
    padding-top: 26px;
  }

  .comic-title-overlay h3{
    position: absolute;
    top: 6px;
    left: 10px;
    right: 10px;

    margin: 0;
    padding: 0;

    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
    color: rgba(255,255,255,.9);
    text-align: center;

    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    z-index: 3;
    pointer-events: none;
    text-shadow: 0 2px 6px rgba(0,0,0,.7);
  }

  .comic-title-overlay{
    background: rgba(0,0,0,.65);
    border-radius: 0 0 var(--radius) var(--radius);
    border-top: 1px solid rgba(255,255,255,.06);

    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

/* CLEAN VIEW: REMOVE TITLES & TOP PANEL ON MOBILE */
@media (max-width: 768px) {
  .comic-title-overlay h3 {
    display: none !important;
  }

  .comic-card {
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
  }

  .comic-title-overlay {
    background: rgba(0,0,0,0.5) !important;
    padding: 10px !important;
    border-top: none !important;
  }

  .comic-image {
    width: 100% !important;
  }
}

/* READ NOW PULSE */
@keyframes ctaPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(180,120,255,.45);
  }
  70% {
    transform: scale(1.04);
    box-shadow: 0 0 0 12px rgba(180,120,255,0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(180,120,255,0);
  }
}

.comic-btn{
  animation: ctaPulse 2.8s ease-out infinite;
}

@media (hover:hover){
  .comic-btn:hover{
    animation: none;
  }
}

.comic-btn:active{
  animation: none;
  transform: scale(0.98);
}

/* VIEW BADGE */
.comic-image{
  position: relative;
}

.views-badge{
  position: absolute;
  top: 8px;
  left: 8px;

  display: flex;
  align-items: center;
  gap: 6px;

  padding: 5px 8px;
  border-radius: 10px;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;

  color: #fff;
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.18);

  backdrop-filter: blur(6px);
  box-shadow: 0 6px 14px rgba(0,0,0,.45);

  z-index: 4;
  pointer-events: none;
}

.views-badge::before{
  content: "👁";
  font-size: 12px;
  opacity: .9;
}

.views-badge.views-hot{
  background: linear-gradient(135deg, #ff7a18, #ff2d55, #b721ff);
  border: none;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.25),
    0 8px 22px rgba(255,90,30,.65);

  animation: viewsGlow 2.6s ease-in-out infinite;
}

@keyframes viewsGlow{
  0%, 100%{
    filter: brightness(1);
  }
  50%{
    filter: brightness(1.25);
  }
}

@media (max-width: 480px){
  .views-badge{
    top: 6px;
    left: 6px;
    font-size: 10px;
    padding: 4px 7px;
    border-radius: 9px;
  }
}

/* DESKTOP: HIDE COMIC TITLES */
@media (min-width: 769px){
  .comic-title-overlay h3{
    display: none !important;
  }
}

/* FIXED VIEW BADGE */
.comic-image{
  position: relative;
}

.views-badge{
  position: absolute;
  top: 6px;
  left: 6px;

  min-width: 44px;
  height: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  padding: 0 6px;
  border-radius: 999px;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;

  color: #fff;
  background: rgba(0,0,0,.7);
  border: 1px solid rgba(255,255,255,.2);

  backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(0,0,0,.5);

  z-index: 5;
  pointer-events: none;
}

.views-badge::before{
  content: "👁";
  font-size: 11px;
  line-height: 1;
}

.views-badge.views-hot{
  background: linear-gradient(135deg, #ff8a00, #ff3d81);
  border: none;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.25),
    0 6px 14px rgba(255,80,80,.6);

  animation: none;
}

/* VIEW BADGE RESPONSIVE */
.views-badge{
  position: absolute;
  top: 6px;
  left: 6px;

  min-width: 44px;
  height: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  padding: 0 6px;
  border-radius: 999px;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;

  color: #fff;
  background: rgba(0,0,0,.7);
  border: 1px solid rgba(255,255,255,.2);

  backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(0,0,0,.5);

  z-index: 5;
  pointer-events: none;
}

.views-badge::before{
  content: "👁";
  font-size: 11px;
}

@media (min-width: 769px){
  .views-badge{
    top: 10px;
    left: 10px;

    min-width: 56px;
    height: 26px;

    padding: 0 10px;

    font-size: 13px;
    font-weight: 800;

    box-shadow: 0 6px 16px rgba(0,0,0,.55);
  }

  .views-badge::before{
    font-size: 13px;
  }
}

.views-badge.views-hot{
  background: linear-gradient(135deg, #ff8a00, #ff3d81);
  border: none;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.25),
    0 6px 14px rgba(255,80,80,.6);
}

/* LEGAL / TERMS */
footer ol li {
  color: rgba(255,255,255,.45) !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
}

footer p:first-of-type {
  margin-top: 60px !important;
  margin-bottom: 20px !important;
  text-align: center;
  font-weight: 500;
  color: rgba(255,255,255,.55) !important;
}

footer {
  margin-top: 60px;
  padding-top: 40px;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.35) 40%,
      rgba(0,0,0,.55) 100%
    );
}

footer ol {
  max-width: 820px;
  margin: 0 auto;
  padding-left: 20px;
}

footer ol li {
  margin-bottom: 12px;
}

@media (max-width: 600px) {
  footer ol li {
    font-size: 11px !important;
    color: rgba(255,255,255,.4) !important;
  }

  footer p:first-of-type {
    margin-top: 40px !important;
  }
}

/* HARD OVERRIDE — LEGAL TO BOTTOM */
footer {
  display: flex;
  flex-direction: column;
}

footer p:not(.copyright p),
footer ol {
  order: 2;
}

footer p:not(.copyright p) {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;

  text-align: left !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,.45) !important;
}

footer p:first-of-type {
  margin-top: 24px !important;
  margin-bottom: 16px !important;
  text-align: center !important;
  font-weight: 500;
  color: rgba(255,255,255,.55) !important;
}

footer ol {
  padding-left: 22px !important;
  list-style: decimal !important;
}

footer ol li {
  margin-bottom: 10px !important;
}

@media (max-width: 600px) {
  footer p:not(.copyright p) {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
}

/* GLOBAL PAGE ORDER */
footer p:not(.copyright p),
footer ol{
  order:6;
}

/* FINAL STABLE PAGE ORDER */
.page{
  display:flex;
  flex-direction:column;
}

.container{
  display:block;
}

footer{
  display:flex;
  flex-direction:column;
  margin-top:60px;
}

footer .faq-section{
  order:1;
}

footer .copyright{
  order:2;
}

footer p:not(.copyright p),
footer ol{
  order:3;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  font-size:12px;
  line-height:1.55;
  color:rgba(255,255,255,.45);
  text-align:left;
}

footer p:first-of-type{
  margin-top:24px;
  margin-bottom:16px;
  text-align:center;
  font-weight:500;
  color:rgba(255,255,255,.55);
}

footer ol{
  padding-left:22px;
}

footer ol li{
  margin-bottom:8px;
}

@media (max-width:600px){
  footer p:not(.copyright p),
  footer ol li{
    font-size:11px;
  }
}

/* DESKTOP CENTERED LAYOUT */
@media (min-width: 1024px){

  .top-seo,
  .faq-section,
  main section{
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  .top-seo p,
  main section p{
    text-align: left;
  }

  .comics-grid{
    max-width: 900px;
    margin: 0 auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .comic-card{
    transform: scale(.92);
    transform-origin: top center;
  }

  .comic-card:hover{
    transform: scale(.95);
  }
}

@media (min-width: 1600px){
  .comics-grid{
    max-width: 960px;
  }

  .top-seo,
  .faq-section,
  main section{
    max-width: 960px;
  }
}

/* DESKTOP SEO TEXT NORMALIZATION */
@media (min-width: 1024px){

  .top-seo{
    max-width: 900px;
    margin: 0 auto;
  }

  .top-seo ul{
    margin: 18px 0 18px 0;
    padding-left: 20px;
  }

  .top-seo li{
    color: var(--muted2);
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 8px;
  }

  .top-seo li strong,
  .top-seo li b{
    font-weight: 600;
    color: var(--muted);
  }

  .top-seo .grid-table,
  .top-seo .meta,
  .top-seo .info,
  .top-seo table{
    margin-top: 18px;
  }

  .top-seo p strong{
    font-weight: 600;
    color: var(--text);
  }

  .top-seo p,
  .top-seo li{
    letter-spacing: normal;
  }
}

/* DESKTOP META TEXT INLINE */
@media (min-width: 1024px){

  .top-seo .grid-table,
  .top-seo .meta,
  .top-seo .info {
    max-width: 900px;
    margin: 16px auto 0;
  }

  .top-seo .row {
    display: block;
    margin-bottom: 8px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--muted2);
  }

  .top-seo .row span:first-child {
    display: inline;
    font-weight: 600;
    color: var(--muted);
    margin-right: 6px;
  }

  .top-seo .row span:last-child {
    display: inline;
    color: var(--text);
    font-weight: 400;
  }
}

/* SECTION VISUAL ORDER */
.page{
  display:flex;
  flex-direction:column;
}

.ph-header{ order: 1; }
main{ order: 2; }
.top-seo{ order: 3; }
.faq-section{ order: 4; }
.copyright{ order: 5; }
.legal{ order: 6; }

/* LEGAL / TERMS */
.legal p,
.legal ol,
.legal ol li{
  color: rgba(255,255,255,.45) !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
}

.legal p:first-of-type{
  margin-top: 24px !important;
  margin-bottom: 16px !important;
  text-align: center !important;
  font-weight: 500;
  color: rgba(255,255,255,.55) !important;
}

.legal ol{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 22px !important;
  list-style: decimal !important;
  text-align: left !important;
}

.legal ol li{
  margin-bottom: 10px !important;
}

@media (max-width: 600px){
  .legal p,
  .legal ol li{
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
}

/* NOISE */
.noise{
  position: static;
  margin-top: 40px;
  padding: 16px 20px;
  background: #0f0f0f;
  color: #bbb;
  font-size: 13px;
  line-height: 1.5;
  border-top: 1px solid #222;
}

body, .page {
  display: flex;
  flex-direction: column;
}

.noise {
  order: 9999;
}

/* FAQ FINAL FIX */
.faq-section{
  max-width:var(--max);
  margin:18px auto 0;
  padding:0 14px 22px;
}

.faq-section h2{
  text-align:center;
  font-size:clamp(1.4rem, 3.2vw, 2rem);
  margin:18px 0 14px;
}

.faq-item{
  background:rgba(0,0,0,.22);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  margin-bottom:12px;
  overflow:hidden;
}

.faq-item details{
  border:0;
}

.faq-item summary{
  padding:16px;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  user-select:none;
}

.faq-item summary::-webkit-details-marker{
  display:none;
}

.faq-item summary h3{
  font-size:clamp(1rem, 2.6vw, 1.1rem);
  font-weight:650;
}

.faq-answer{
  max-height:none !important;
  overflow:visible !important;
  transition:none !important;
  padding:0 16px 14px !important;
  color:var(--muted);
}

.faq-answer p{
  color:var(--muted);
  padding-top:10px;
}

.faq-item.active .faq-answer{
  max-height:none !important;
  overflow:visible !important;
  padding:0 16px 14px !important;
}

.faq-toggle{ display:none !important; }

.faq-item details[open] .faq-answer{
  animation:faqFade .2s ease-in;
}

@keyframes faqFade{
  from{opacity:0; transform:translateY(-4px);}
  to{opacity:1; transform:translateY(0);}
}

/* FINAL OVERRIDE — SHOW TITLES EVERYWHERE */
.comic-title-overlay h3{
  display:block !important;
  position:static !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:unset !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:unset !important;
  word-break:break-word;
  hyphens:auto;
}

.comic-card{
  padding-top:0 !important;
}

.comic-title-overlay{
  background:rgba(0,0,0,.65) !important;
  border-top:1px solid rgba(255,255,255,.06) !important;
}