/* KRYPTA v0.11.1: calm editorial proportions inspired by leading newsrooms.
   Loaded after all component styles, scoped to affected templates. */

/* 1. Homepage lead grid: 1 hero + two truly balanced editorial cards */
.krypta-home .home-hero-grid{
  grid-template-columns:minmax(0,1.56fr) minmax(0,1fr);
  align-items:stretch;
  height:clamp(405px,34vw,520px);
  gap:20px
}
.krypta-home .home-hero-lead,
.krypta-home .home-hero-side{min-height:0;height:100%}
.krypta-home .home-hero-side{grid-template-rows:repeat(2,minmax(0,1fr));gap:20px}
.krypta-home .story-card--hero-lead,
.krypta-home .story-card--hero-lead .story-body{min-height:0;height:100%}
.krypta-home .story-card--hero-lead{overflow:hidden;border-radius:19px}
.krypta-home .story-card--hero-lead .story-body{
  padding:clamp(25px,3vw,42px);
  justify-content:flex-end;
  background:linear-gradient(180deg,#1018200a 5%,#10182076 43%,#101820f9 100%)
}
.krypta-home .story-card--hero-lead h3{
  margin:8px 0 13px;
  font-size:clamp(1.9rem,2.85vw,3rem);
  line-height:1.13;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  text-wrap:balance
}
.krypta-home .story-card--hero-lead .story-body p{
  max-width:63ch;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  margin:0 0 12px;
  font-size:.93rem;line-height:1.6
}
.krypta-home .story-card--hero-side{
  display:grid;grid-template-columns:minmax(0,39%) minmax(0,61%);
  height:100%;min-height:0;overflow:hidden;border-radius:18px
}
.krypta-home .story-card--hero-side .story-media{
  width:100%;height:100%;min-width:0;min-height:0;flex:none;aspect-ratio:auto;overflow:hidden
}
.krypta-home .story-card--hero-side .story-media img{width:100%;height:100%;object-fit:cover}
.krypta-home .story-card--hero-side .story-body{
  box-sizing:border-box;width:auto;min-width:0;min-height:0;
  overflow:hidden;display:flex;flex-direction:column;
  justify-content:flex-start;gap:7px;padding:clamp(15px,1.55vw,22px)
}
.krypta-home .story-card--hero-side .story-body h3{
  margin:0;font-size:clamp(1.02rem,1.25vw,1.34rem);
  line-height:1.28;letter-spacing:-.037em
}
.krypta-home .story-card--hero-side h3 a{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden
}
.krypta-home .story-card--hero-side .story-body p{display:none}
.krypta-home .story-card--hero-side .story-body .story-meta{
  margin-top:auto;padding-top:8px;font-size:.73rem
}
.krypta-home .home-hero-side .story-card:only-child{height:100%;min-height:0;grid-row:1/-1}

/* 2. Category lead cards should occupy one coherent editorial region */
.krypta-category .category-hero-grid{
  grid-template-columns:minmax(0,1.56fr) minmax(0,1fr);
  align-items:stretch;gap:20px;height:clamp(365px,33vw,475px)
}
.krypta-category .category-hero-grid--single{grid-template-columns:1fr;height:auto}
.krypta-category .category-hero-grid--single .story-card--category-lead{min-height:360px}
.krypta-category .category-hero-primary,.krypta-category .category-hero-secondary{min-height:0;height:100%}
.krypta-category .category-hero-secondary{grid-template-rows:repeat(2,minmax(0,1fr));gap:20px}
.krypta-category .story-card--category-lead{min-height:0;height:100%;overflow:hidden;border-radius:19px}
.krypta-category .story-card--category-lead .story-body{padding:clamp(25px,3vw,42px)}
.krypta-category .story-card--category-lead h3{font-size:clamp(1.8rem,2.6vw,2.8rem);line-height:1.16}
.krypta-category .story-card--category-lead h3 a{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;color:#fff
}
.krypta-category .story-card--category-lead .story-body p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden
}
.krypta-category .story-card--category-side{
  display:grid;grid-template-columns:minmax(0,39%) minmax(0,61%);
  min-height:0;height:100%;overflow:hidden;border-radius:18px
}
.krypta-category .story-card--category-side .story-media{
  width:100%;height:100%;flex:none;aspect-ratio:auto;overflow:hidden
}
.krypta-category .story-card--category-side .story-media img{width:100%;height:100%;object-fit:cover}
.krypta-category .story-card--category-side .story-body{
  width:auto;min-width:0;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-start;padding:clamp(14px,1.55vw,22px);gap:6px
}
.krypta-category .story-card--category-side h3{font-size:clamp(1.03rem,1.22vw,1.28rem);line-height:1.28;margin:0}
.krypta-category .story-card--category-side h3 a{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden
}
.krypta-category .story-card--category-side p{display:none}
.krypta-category .story-card--category-side .story-meta{margin-top:auto;font-size:.73rem}
.krypta-category .category-hero-secondary .story-card:only-child{grid-row:1/-1}

/* 3. Category context chart: never let captions collapse to "7 днів томуЗараз" */
.krypta-category .krypta-context-chart{display:flex;flex-direction:column;min-width:0;align-self:stretch;justify-content:center}
.krypta-category .krypta-context-chart .krypta-sparkline-svg{
  width:100%;height:auto;max-height:185px;margin:0 0 12px
}
.krypta-category .krypta-context-chart .coin-chart-legend{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  width:100%;min-width:0;gap:20px;padding:6px 0 0;margin:0;
  font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap
}
.krypta-category .krypta-context-chart .coin-chart-legend span{
  display:block;white-space:nowrap
}
.krypta-category .krypta-context-chart .coin-chart-legend span:last-child{text-align:right;margin-left:auto}
.krypta-category .krypta-context-chart .krypta-market-attribution{margin-top:12px}

/* 4. Article: legible measure with consistent reading/afterword rhythm */
.krypta-single .krypta-article-shell{width:min(100%,1080px);margin-inline:auto}
.krypta-single .article-breadcrumbs{
  max-width:940px;margin:0 auto 25px;font-size:.75rem;
  line-height:1.65;overflow-wrap:anywhere
}
.krypta-single .krypta-article-header{max-width:930px;margin:0 auto 27px}
.krypta-single .krypta-article h1{
  font-size:clamp(2.05rem,4vw,3.9rem);line-height:1.13;
  letter-spacing:-.055em;max-width:21ch;margin-bottom:21px;text-wrap:balance
}
.krypta-single .article-dek{max-width:70ch;line-height:1.6}
.krypta-single .article-byline{gap:16px;padding:16px 0}
.krypta-single .krypta-article-cover{width:100%;max-width:1080px;margin:0 auto clamp(30px,4vw,50px)}
.krypta-single .krypta-article-cover img{width:100%;height:auto;max-height:520px;aspect-ratio:1.91;object-fit:cover;border-radius:18px}
.krypta-single .article-main-grid{width:min(100%,750px);max-width:750px;margin-inline:auto}
.krypta-single .article-reading-column{width:100%;min-width:0}
.krypta-single .article-content{font-size:clamp(1.02rem,1.15vw,1.125rem);line-height:1.78}
.krypta-single .article-content p{line-height:1.82;margin:0 0 1.25em}
.krypta-single .article-content h2{font-size:clamp(1.45rem,2.2vw,1.95rem);line-height:1.28;margin:2em 0 .6em;text-wrap:balance}
.krypta-single .article-content h3{font-size:clamp(1.22rem,1.8vw,1.55rem)}
.krypta-single .article-content img{max-width:100%;height:auto}
.krypta-single .article-content :is(.alignwide,.alignfull){max-width:100%;margin-inline:0}
.krypta-single .article-toc{
  max-width:100%;padding:23px 28px;border-radius:16px;
  background:color-mix(in srgb,var(--paper) 87%,var(--lime) 13%);
  border-color:var(--line);margin-bottom:38px
}
.krypta-single .article-toc ol{padding-left:23px}
.krypta-single .article-toc a{line-height:1.5}
.krypta-single .article-postscript{width:100%;display:grid;gap:18px;margin:30px 0 0}
.krypta-single .article-postscript .krypta-newsletter{
  display:grid;grid-template-columns:minmax(0,1fr);gap:18px;
  margin:0;padding:27px 30px;border-radius:18px
}
.krypta-single .article-postscript .krypta-newsletter h2{
  font-size:clamp(1.5rem,2vw,1.95rem);line-height:1.22;max-width:21ch
}
.krypta-single .article-postscript .krypta-newsletter-copy p{max-width:65ch}
.krypta-single .article-postscript .article-author-box{
  width:100%;max-width:none;margin:0;box-shadow:var(--soft-shadow);
  border-radius:17px;padding:24px
}
.krypta-single .article-related{margin-top:75px;padding-top:34px;border-top:1px solid var(--line)}
.krypta-single .article-related-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px
}
.krypta-single .article-related-grid .story-card{min-width:0;overflow:hidden;height:100%}
.krypta-single .article-related-grid .story-media{display:block;aspect-ratio:16/10;overflow:hidden}
.krypta-single .article-related-grid .story-media img{width:100%;height:100%;object-fit:cover}
.krypta-single .article-related-grid .story-body{padding:17px;display:flex;flex-direction:column;min-width:0;gap:8px}
.krypta-single .article-related-grid .story-body h3{margin:0;font-size:1rem;line-height:1.34}
.krypta-single .article-related-grid .story-body h3 a{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden
}
.krypta-single .article-related-grid .story-body p{
  margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  font-size:.81rem;line-height:1.52;color:var(--muted)
}
.krypta-single .article-related-grid .story-meta{margin-top:auto;font-size:.72rem}

/* Explicit breakpoints override old theme breakpoints consistently. */
@media(max-width:1100px){
  .krypta-home .home-hero-grid,.krypta-category .category-hero-grid{
    height:auto;grid-template-columns:minmax(0,1fr)
  }
  .krypta-home .story-card--hero-lead,.krypta-home .story-card--hero-lead .story-body{min-height:390px;height:auto}
  .krypta-category .story-card--category-lead{min-height:350px;height:auto}
  .krypta-home .home-hero-side,.krypta-category .category-hero-secondary{
    grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;height:auto
  }
  .krypta-home .story-card--hero-side,.krypta-category .story-card--category-side{
    display:flex;flex-direction:column;height:100%;min-height:295px
  }
  .krypta-home .story-card--hero-side .story-media,.krypta-category .story-card--category-side .story-media{
    display:block;width:100%;height:144px;min-height:144px
  }
  .krypta-home .story-card--hero-side .story-body,.krypta-category .story-card--category-side .story-body{
    flex:1;padding:18px 20px;min-height:0
  }
  .krypta-home .story-card--hero-side h3 a,.krypta-category .story-card--category-side h3 a{-webkit-line-clamp:3}
}
@media(max-width:700px){
  .krypta-category .krypta-context-chart .coin-chart-legend{font-size:.72rem}
  .krypta-single .krypta-article h1{font-size:clamp(2rem,7vw,3rem);max-width:none}
  .krypta-single .article-main-grid{width:100%}
  .krypta-single .article-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .krypta-single .article-postscript .krypta-newsletter{padding:23px}
}
@media(max-width:560px){
  .krypta-home .home-hero-side,.krypta-category .category-hero-secondary{
    grid-template-columns:minmax(0,1fr)
  }
  .krypta-home .story-card--hero-side,.krypta-category .story-card--category-side{
    display:grid;grid-template-columns:37% minmax(0,63%);min-height:160px
  }
  .krypta-home .story-card--hero-side .story-media,.krypta-category .story-card--category-side .story-media{
    height:100%;min-height:160px;aspect-ratio:auto
  }
  .krypta-home .story-card--hero-side .story-body,.krypta-category .story-card--category-side .story-body{
    padding:15px
  }
  .krypta-home .story-card--hero-side h3 a,.krypta-category .story-card--category-side h3 a{-webkit-line-clamp:4}
  .krypta-home .story-card--hero-lead,.krypta-home .story-card--hero-lead .story-body{min-height:335px}
  .krypta-category .story-card--category-lead{min-height:315px}
  .krypta-single .krypta-article-cover img{border-radius:12px;aspect-ratio:16/10}
  .krypta-single .article-toc{padding:19px}
  .krypta-single .article-postscript .article-author-box{padding:18px}
  .krypta-single .article-related-grid{grid-template-columns:minmax(0,1fr)}
  .krypta-single .article-related-grid .story-card{display:grid;grid-template-columns:38% minmax(0,1fr)}
  .krypta-single .article-related-grid .story-media{height:100%;aspect-ratio:auto}
  .krypta-single .article-related-grid .story-body{padding:14px}
  .krypta-single .article-related-grid .story-body p{display:none}
}
@media(prefers-reduced-motion:reduce){
  .krypta-home .story-card,.krypta-category .story-card,.krypta-single .story-card{transition:none}
}
/* Featured singleton: no empty second column on a fresh/small newsroom. */
.krypta-home .home-hero-grid--single{grid-template-columns:minmax(0,1fr)}
.krypta-home .home-hero-grid--single .story-card--hero-lead h3{max-width:24ch}
