/*
Theme Name: InvisionFree Magazine Child
Template: invisionfree-magazine
Description: Design polish for InvisionFree Magazine (cards, single post reading layout, image fallbacks). Parent theme untouched.
Version: 1.0.0
Text Domain: ifm-child
*/

/* ===== A. Cards: one image ratio, clean crop, tidy type, hover ===== */
.story-grid .story-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.story-grid .story-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-pop);border-color:color-mix(in oklab,var(--c) 38%,var(--line))}
.story-grid .story-card .story-media{aspect-ratio:16/10;border-radius:0;margin:0}
.story-grid .story-card .story-body{padding:18px 20px 20px;gap:9px;flex:1}
.story-grid .story-card .story-title{font-size:clamp(17px,.92rem + .3vw,19.5px);line-height:1.26;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.story-grid .story-card .story-excerpt{font-size:15px;line-height:1.55;-webkit-line-clamp:2}
.story-grid .story-card .post-meta{margin-top:auto;padding-top:6px;font-size:13px}
.story-grid{gap:28px}
.story-list .story-row{align-items:center}
.story-list .story-row .story-media{border-radius:var(--r-md)}
/* hero & feature titles a little calmer */
.story-lead .story-title{font-size:clamp(30px,1.3rem + 2vw,46px);max-width:20ch}
.story-feature .story-title{font-size:clamp(22px,1.1rem + .8vw,28px)}
.story-media img{background:var(--surface-2)}
/* no-image / broken-image fallback: soft tinted panel in the category colour */
.story-media,.post-figure-media{background:linear-gradient(135deg,color-mix(in oklab,var(--c,var(--accent)) 24%,var(--surface)),color-mix(in oklab,var(--c,var(--accent)) 6%,var(--surface-2)))}
.story-media::before,.post-figure-media::before{content:"";position:absolute;inset:0;opacity:.5;background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.55),transparent 45%)}
.story-media img,.post-figure-media img{position:relative}
img.ifm-broken{visibility:hidden}
/* pagination / load more */
.load-more{border-radius:999px;font-weight:650}
.pagination .nav-links,.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pagination .page-numbers{min-width:42px;height:42px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-weight:650;font-size:15px;transition:background .2s,color .2s,border-color .2s}
.pagination a.page-numbers:hover{border-color:var(--accent);color:var(--accent-ink)}
.pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pagination .page-numbers.dots{border:0;background:none}

/* ===== B. Single post: calm reading layout ===== */
.post-title{font-size:clamp(28px,1.1rem + 2vw,44px);line-height:1.12;max-width:26ch}
.single-article .post-header{padding-top:clamp(24px,3.5vw,48px);gap:14px}
.breadcrumbs{font-size:13.5px;flex-wrap:wrap}
.post-dek{font-size:clamp(18px,.95rem + .45vw,21px);max-width:60ch}
.post-header .post-meta{padding-top:12px;border-top:1px solid var(--line);width:100%;max-width:720px}
.post-figure-media{aspect-ratio:16/9;box-shadow:var(--shadow-1)}
.post-figure-media img{object-position:center}
.post-figure figcaption:empty{display:none}
.entry-content{font-size:clamp(17.5px,1rem + .15vw,19px);line-height:1.75}
.entry-content>p:first-of-type{font-size:1.1em}
.entry-content h2{font-size:clamp(23px,1.1rem + .7vw,30px);margin-top:1.9em;padding-top:.15em;position:relative}
.entry-content h2::before{content:"";display:block;width:36px;height:3px;border-radius:3px;background:var(--c,var(--accent));margin-bottom:.55em}
.entry-content h3{font-size:clamp(19.5px,1rem + .4vw,23px)}
.entry-content img{border-radius:var(--r-md);height:auto}
.entry-content table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse;font-family:var(--font-ui);font-size:15px}
.entry-content th,.entry-content td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left}
.entry-content th{background:var(--surface-2)}
.post-tags a,.tag-list a,.entry-tags a{border-radius:999px}
.related-stories,.post-related{margin-top:clamp(40px,5vw,72px)}
@media (max-width:760px){
  .story-grid{gap:20px}
  .story-grid .story-card .story-body{padding:16px 16px 18px}
  .post-header .post-meta{max-width:none}
  .story-list .story-row{grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:start}
}
@media (prefers-reduced-motion:reduce){.story-grid .story-card,.story-grid .story-card:hover{transition:none;transform:none}}