/* styles-v6.css — Classic News Portal (fixed 960px, tightened thumbs & clamps) */

/* Base */
:root{
  --container: 960px;
  --bg: #f2f2f2;
  --paper: #ffffff;
  --ink: #222;
  --ink-dim:#444;
  --line:#cfcfcf;
  --rule:#d9d9d9;
  --link:#0645ad;
  --visited:#512da8;
  --accent:#e6e6e6;
  --grad-top:#fdfdfd;
  --grad-bot:#e6e6e6;

  /* image sizing (bumped a bit for nicer balance) */
  --lead-thumb-w: 320px;
  --lead-thumb-h: 260px;
  --story-thumb-w: 140px;
  --story-thumb-h: 94px;
  --article-hero-h: 360px;

  /* text clamps */
  --lead-title-lines: 3;
  --story-title-lines: 2;
  --story-excerpt-lines: 2;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:14px/1.45 Arial,Helvetica,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:underline}
a:visited{color:var(--visited)}
.container{width:var(--container);margin:0 auto}

/* Top */
.topbar{background:#fff;border-bottom:1px solid var(--line)}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding:8px 10px}
.brand a{font:700 28px/1 Georgia, 'Times New Roman', Times, serif; color:#000; text-decoration:none}
.site-search{display:flex;gap:6px}
.site-search input{padding:6px 8px;border:1px solid var(--line);width:260px}
.site-search button{padding:6px 10px;border:1px solid var(--line);background:var(--accent);cursor:pointer}

/* Menubar */
.menubar{background:linear-gradient(#fefefe,#eaeaea);border-top:1px solid #fff;border-bottom:1px solid var(--line)}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:0}
.menu>li{border-right:1px solid var(--line)}
.menu>li>a, .menu>li>span{display:block;padding:2px 12px;text-decoration:none;color:#000}
.menu>li>a:hover{background:#ddd;text-decoration:underline}
.more{position:relative}
.submenu{display:none;position:absolute;left:0;top:100%;background:#fff;border:1px solid var(--line);list-style:none;margin:0;padding:0;min-width:200px;z-index:5}
.more:hover .submenu{display:block}
.submenu li a{display:block;padding:6px 10px;color:#000;text-decoration:none}
.submenu li a:hover{background:#eee}

/* Layout */
.layout{display:grid;grid-template-columns:180px 1fr 260px;gap:16px;padding:12px 0}
.layout.layout--single{grid-template-columns:1fr}
.col{min-width:0}

/* Boxes (Rails) */
.box{background:var(--paper);border:1px solid var(--line);margin-bottom:12px}
.box-hd{background:linear-gradient(var(--grad-top),var(--grad-bot));padding:8px 10px;border-bottom:1px solid var(--line);font-weight:700}
.cat-list, .tool-list, .latest-list, .pick-list{list-style:none;margin:0;padding:8px}
.cat-list li, .tool-list li, .latest-list li, .pick-list li{margin:6px 0;font-size: 12px;}

/* Breadcrumb bar */
.crumbs{    background: #fff;
    border: 1px solid var(--line);
    padding: 6px 10px;
    margin-bottom: 5px;
    font-size: 11px;}
.crumb{color:#000;text-decoration:none}
.crumb-sep{color:#999;margin:0 6px}
.crumb.current{font-weight:700}

.rule{border:0;border-top:1px solid var(--rule);margin:12px 0}

/* Lead (hero row) */
.lead{
  display:grid;
  grid-template-columns:var(--lead-thumb-w) 1fr;
  gap:12px;
  background:var(--paper);
  border:1px solid var(--line);
  padding:10px;
}
.lead-thumb{
  display:block;border:1px solid var(--line);background:#fff;width:var(--lead-thumb-w);
}
.lead-thumb img{
  width:100%;
  height:var(--lead-thumb-h);
  object-fit:cover;
}
.lead-body{min-width:0}
.lead-cat{
  font:700 12px/1 Arial, sans-serif;color:#000;text-decoration:none;background:#eee;border:1px solid var(--line);
  padding:2px 6px;display:inline-block;margin-bottom:8px
}
.lead-title{font:700 28px/1.18 Georgia, 'Times New Roman', Times, serif;margin:0 0 6px}
.lead-title a{text-decoration:none;color:#000}
.lead-title a:hover{text-decoration:underline}
/* clamp long hero titles */
.lead-title{
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-line-clamp: var(--lead-title-lines);
}
.lead-excerpt{
  margin:0;color:var(--ink-dim);
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:3;
}

/* Story list (category/home rows) */
.story-list{display:flex;flex-direction:column;gap:10px}
.story{
  display:grid;grid-template-columns:var(--story-thumb-w) 1fr;gap:10px;
  background:var(--paper);border:1px solid var(--line);padding:8px;
}
.story-thumb{display:block;border:1px solid var(--line);background:#fff;width:var(--story-thumb-w)}
.story-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.story-title{font:700 18px/1.25 Georgia, 'Times New Roman', Times, serif;margin:0 0 4px}
/* clamp story titles/excerpts for even rows */
.story-title a{text-decoration:none;color:#000}
.story-title a:hover{text-decoration:underline}
.story-title{
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-line-clamp: var(--story-title-lines);
}
.story-meta{font-size:12px;color:#666;margin-bottom:6px}
.story-excerpt{
  margin:0;color:#333;
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-line-clamp: var(--story-excerpt-lines);
}

/* Pager */
.pager{display:flex;align-items:center;gap:8px;justify-content:center;margin:14px 0}
.pager-link{background:#fff;border:1px solid var(--line);padding:4px 8px;text-decoration:none;color:#000}
.pager-link:hover{background:#eee}
.pager-current{background:#ddd;border:1px solid var(--line);padding:4px 8px}
.pager-disabled{color:#888;border:1px solid var(--line);padding:4px 8px;background:#f6f6f6}
.pager-sep{color:#999}

/* Article */
.article{background:var(--paper);border:1px solid var(--line);padding:12px}
.article-hd{border-bottom:1px solid var(--line);margin-bottom:10px}
.article-title{font:700 30px/1.2 Georgia, 'Times New Roman', Times, serif;margin:0 0 6px}
.article-meta{font-size:10px;color:#666;margin-bottom:8px}
.article-hero{margin:10px 0;border:1px solid var(--line);background:#fff}
.article-hero img{width:100%;height:120px;object-fit:cover}
.article-body{font:14px/1.6 Georgia, 'Times New Roman', Times, serif;color:#111}
.article-body p{margin:0 0 12px}
.article-body h2, .article-body h3{font-family:Georgia, 'Times New Roman', Times, serif}
.article-body h2{font-size:22px;margin:0px 0 0px}
.article-body h3{font-size:18px;margin:0px 0 0px}
.article-body ul, .article-body ol{margin:10px 0 10px 22px}
.article-body blockquote{border-left:3px solid var(--line);padding:8px 10px;margin:10px 0;background:#fafafa}
/* protect layout from big content images or iframes */
.article-body img, .article-body video, .article-body iframe{max-width:100%;height:auto}

/* Search & utility */
.classic-card{background:#fff;border:1px solid var(--line);padding:12px}
.search-page{margin:24px 0}
.search-brand a{text-decoration:none;color:#000;font:700 32px/1 Georgia, 'Times New Roman', Times, serif}
.search-box{display:flex;gap:8px;margin:14px 0}
.search-box input{flex:1;border:1px solid var(--line);padding:8px}
.search-box button{border:1px solid var(--line);background:var(--accent);padding:8px 12px;cursor:pointer}

/* Footer */
.footer{border-top:1px solid var(--line);background:#fff;margin-top:16px}
.footer .container{display:flex;align-items:center;justify-content:space-between;padding:10px}
.foot-links a{text-decoration:none;color:#000}
.foot-links a:hover{text-decoration:underline}

/* Simple responsiveness (keeps the old-school vibe) */
@media (max-width: 1020px){
  .container{width:95%}
}
@media (max-width: 860px){
  .layout{grid-template-columns:1fr;gap:12px}
  .left-rail, .right-rail{order:2}
  .main-col{order:1}
  .lead{grid-template-columns:1fr}
  .lead-thumb{width:100%}
  .lead-thumb img{height:200px}
  .story{grid-template-columns:100px 1fr}
  .story-thumb{width:100px}
  .story-thumb img{  height:100%;
}
  .article-hero img{height:120px}
}
/* Right-rail Web Search — restore classic look */
.box .web-search{
  display:flex;
  gap:8px;
  padding:8px;
  align-items:center;
}
.box .web-search input{
  flex:1;
  min-width:0;
  padding:6px 8px;
  border:1px solid var(--line);
  background:#fff;
  color:#000;
  font:14px/1.35 Arial, Helvetica, sans-serif;
}
.box .web-search button{
  padding:6px 10px;
  border:1px solid var(--line);
  background:var(--accent);
  color:#000;
  cursor:pointer;
}
.box .web-search button:hover{ background:#ddd; }

/* keep it tidy on small screens */
@media (max-width: 860px){
  .box .web-search{ gap:6px; }
  .box .web-search input{ padding:6px; }
  .box .web-search button{ padding:6px 8px; }
}
/* Simple responsiveness (keeps the old-school vibe) */
@media (max-width: 1020px){
  .container{width:95%}
}

/* ===== MOBILE LAYOUT FIXES ===== */
@media (max-width: 860px){
  /* stack layout columns */
  .layout{
    grid-template-columns:1fr;
    gap:12px;
  }
  .left-rail, .right-rail{order:2}
  .main-col{order:1}

  /* top bar: logo over search */
  .topbar .container{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .brand a{
           font-size: 18px;
        line-height: 0.1;
  }
  .site-search{
    width:100%;
  }
  .site-search input{
    flex:1;
    width:100%;
  }
  .site-search button{
    white-space:nowrap;
  }

  /* menu: wrap nicely instead of squishing */
  .menu{
    flex-wrap:wrap;
    row-gap:0;
  }
  .menu>li>a,
  .menu>li>span{
    padding:6px 8px;
    font-size:13px;
  }

  /* lead story full-width image */
  .lead{
    grid-template-columns:1fr;
  }
  .lead-thumb{
    width:100%;
  }
  .lead-thumb img{
    height:200px;
  }
  .lead-title{
    font-size:22px;
  }

  /* smaller story rows */
  .story{
    grid-template-columns:90px 1fr;
    gap:8px;
  }
  .story-thumb{
    width:90px;
  }
  .story-thumb img{
    height:100%;
  }
  .story-title{
    font-size:16px;
  }

  /* article hero + title size down */
  .article-hero img{
    height:120px;
  }
  .article-title{
    font-size:24px;
  }

  /* right-rail web search tweaks */
  .box .web-search{
    gap:6px;
  }
  .box .web-search input{
    padding:6px;
  }
  .box .web-search button{
    padding:6px 8px;
  }

  /* footer: stack on small screens */
  .footer .container{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
}
h1{
  font-size: 20px !important;
}
h2{
  font-size: 18px !important;
}
h3{
    font-size: 16px !important;

}

/* default: desktop */
#wrapper-articlepage__hero-desktop {
  display: block;
}

#wrapper-articlepage__hero-mobile {
  display: none;
}

/* mobile: swap which hero is visible */
@media (max-width: 768px) {
  #wrapper-articlepage__hero-desktop {
    display: none;
  }

  #wrapper-articlepage__hero-mobile {
    display: block;
    margin-top: 12px; /* tweak if you want spacing above hero */
  }
}