/*
 * Tinologi 2.7.1 — layout balance + author/related refinements
 * Loaded after visual-2.7.css so it only normalizes composition problems.
 */

/* --------------------------------------------------------------------------
   Homepage hero: keep image readable, force copy contrast
   -------------------------------------------------------------------------- */
.home-hero .lead.has-featured-image .lead-content{max-width:72%;padding:24px 26px!important}
.home-hero .lead.has-featured-image .lead-content h1,
.home-hero .lead.has-featured-image .lead-content p,
.home-hero .lead.has-featured-image .lead-content .meta,
.home-hero .lead.has-featured-image .lead-content .meta span{color:#fff!important}
.home-hero .lead.has-featured-image .lead-content h1{text-shadow:0 2px 18px rgba(2,23,43,.42)}
.home-hero .lead.has-featured-image .lead-content p{opacity:.94}
.home-hero .lead.has-featured-image .lead-bg::after{
  background:linear-gradient(90deg,rgba(4,25,47,.84) 0%,rgba(5,38,70,.63) 44%,rgba(6,69,124,.20) 72%,rgba(6,69,124,.02) 100%),linear-gradient(to top,rgba(3,23,42,.28),transparent 62%)!important;
}
.home-hero .side-feature{display:grid!important;grid-template-columns:132px minmax(0,1fr)!important;align-items:center!important;gap:15px!important;padding:14px!important}
.home-hero .side-feature-media{width:132px;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#f4f8fb}
.home-hero .side-feature-media img{width:100%;height:100%;object-fit:contain!important;display:block}
.home-hero .side-feature-copy{min-width:0}
.home-hero .side-feature-copy .eyebrow{font-size:11px!important}
.home-hero .side-feature-copy h2{margin:4px 0 7px!important;font-size:16px!important;line-height:1.34!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-hero .side-feature-copy .meta{font-size:11.5px!important;gap:8px!important}

/* --------------------------------------------------------------------------
   Home feature: 1 large + 4 compact cards must end on the same baseline
   -------------------------------------------------------------------------- */
.home-feature .feature-grid{display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr)!important;align-items:stretch!important;gap:18px!important}
.home-feature .feature-large{height:100%!important;display:flex!important;flex-direction:column!important;min-width:0}
.home-feature .feature-large-media{aspect-ratio:16/9!important;height:auto!important;min-height:0!important;flex:none!important;overflow:hidden!important;background:#f6f9fc!important}
.home-feature .feature-large-media img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}
.home-feature .feature-copy{display:flex!important;flex-direction:column!important;flex:1!important;padding:20px 22px!important;min-width:0}
.home-feature .feature-copy .badge{align-self:flex-start!important;width:auto!important;max-width:max-content!important}
.home-feature .feature-copy h3{font-size:23px!important;line-height:1.34!important;margin:9px 0!important}
.home-feature .feature-copy p{margin:0 0 14px!important;color:#6c7f92!important}
.home-feature .feature-copy .meta{margin-top:auto!important}
.home-feature .small-grid{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:repeat(4,minmax(0,1fr))!important;gap:12px!important;height:100%!important;min-width:0!important}
.home-feature .small-grid .post-card{display:grid!important;grid-template-columns:124px minmax(0,1fr)!important;min-height:0!important;height:100%!important;overflow:hidden!important}
.home-feature .small-grid .post-card-media{width:124px!important;height:100%!important;min-height:0!important;aspect-ratio:auto!important;display:grid!important;place-items:center!important;overflow:hidden!important;background:#f6f9fc!important}
.home-feature .small-grid .post-card-media img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}
.home-feature .small-grid .card-body{padding:12px 14px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;min-width:0!important}
.home-feature .small-grid .badge{display:inline-flex!important;align-self:flex-start!important;width:auto!important;max-width:100%!important;padding:4px 8px!important;font-size:10.5px!important}
.home-feature .small-grid h3{font-size:15.5px!important;line-height:1.35!important;margin:6px 0 5px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-feature .small-grid .meta{margin-top:2px!important;font-size:11.5px!important}

/* --------------------------------------------------------------------------
   Category/archive top: main and side column share one height
   -------------------------------------------------------------------------- */
.category-top{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr)!important;gap:18px!important;align-items:stretch!important}
.category-top>.feature-large{height:100%!important;display:flex!important;flex-direction:column!important;min-width:0!important}
.category-top>.feature-large>div:first-child{aspect-ratio:16/9!important;height:auto!important;min-height:0!important;overflow:hidden!important;background:#f6f9fc!important}
.category-top>.feature-large>div:first-child img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}
.category-top .feature-copy{display:flex!important;flex-direction:column!important;flex:1!important;padding:20px 22px!important}
.category-top .feature-copy .badge{display:inline-flex!important;align-self:flex-start!important;width:auto!important;max-width:max-content!important}
.category-top .feature-copy .meta{margin-top:auto!important}
.category-side{display:grid!important;grid-template-rows:repeat(3,minmax(0,1fr))!important;gap:12px!important;height:100%!important;align-self:stretch!important}
.category-mini{display:grid!important;grid-template-columns:128px minmax(0,1fr)!important;align-items:center!important;gap:13px!important;padding:12px!important;min-height:0!important;height:100%!important;overflow:hidden!important}
.category-mini>div:first-child{width:128px!important;aspect-ratio:16/9!important;height:auto!important;min-height:0!important;overflow:hidden!important;border-radius:9px!important;background:#f6f9fc!important}
.category-mini>div:first-child img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}
.category-mini .badge{display:inline-flex!important;width:auto!important;max-width:100%!important;padding:4px 8px!important;font-size:10.5px!important}
.category-mini h3{font-size:15px!important;line-height:1.35!important;margin:5px 0 4px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.category-mini .meta{font-size:11.5px!important;margin-top:4px!important}

/* --------------------------------------------------------------------------
   About/newsletter: two independent balanced cards, no awkward long divider
   -------------------------------------------------------------------------- */
.home-connect{padding-top:46px!important;padding-bottom:52px!important}
.connect-grid{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;gap:18px!important;align-items:stretch!important}
.connect-panel{position:relative;background:#fff;border:1px solid var(--tino-270-line);border-radius:16px;box-shadow:var(--tino-270-shadow-soft);padding:24px 26px;overflow:hidden;min-width:0}
.connect-panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--tino-270-blue),var(--tino-270-blue2))}
.connect-panel h2,.connect-panel h3{margin:7px 0 8px!important;color:var(--tino-270-ink)!important;line-height:1.24!important}
.connect-panel h2{font-size:24px!important}.connect-panel h3{font-size:22px!important}
.connect-panel p{margin:0 0 14px!important;color:#667b8f!important;line-height:1.65!important}
.connect-links{display:flex!important;gap:16px!important;align-items:center!important;flex-wrap:wrap!important}
.connect-links a{color:var(--tino-270-blue)!important;font-weight:700!important}
.connect-newsletter{border-left:1px solid var(--tino-270-line)!important;padding-left:26px!important}
.connect-newsletter .newsletter-form{margin-top:12px!important}

/* --------------------------------------------------------------------------
   Related posts: compact 3-card editorial grid instead of tall empty rows
   -------------------------------------------------------------------------- */
.related-posts{padding:22px!important;margin-top:30px!important}
.related-posts .section-head{margin-bottom:16px!important}
.related-posts .small-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
.related-posts .post-card{display:flex!important;flex-direction:column!important;min-height:0!important;height:auto!important;overflow:hidden!important}
.related-posts .post-card>div:first-child{width:100%!important;aspect-ratio:16/9!important;height:auto!important;min-height:0!important;overflow:hidden!important;background:#f5f8fb!important}
.related-posts .post-card>div:first-child img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}
.related-posts .post-card .card-body{padding:14px 15px 15px!important;display:flex!important;flex-direction:column!important;flex:1!important;min-width:0!important}
.related-posts .post-card h3{font-size:15px!important;line-height:1.4!important;margin:0 0 10px!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.related-posts .post-card .meta{margin-top:auto!important;font-size:11.5px!important}

/* --------------------------------------------------------------------------
   Rich author box
   -------------------------------------------------------------------------- */
.author-box-rich{display:grid!important;grid-template-columns:84px minmax(0,1fr)!important;gap:18px!important;align-items:start!important;padding:22px!important;margin-top:32px!important;position:relative!important;overflow:hidden!important}
.author-box-rich::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--tino-270-blue),var(--tino-270-blue2))}
.author-box-rich .author-avatar{width:84px!important;height:84px!important;border-radius:18px!important;overflow:hidden!important;background:#eef6ff!important;border:1px solid #d8e8f6!important;box-shadow:0 6px 18px rgba(31,88,142,.08)!important}
.author-box-rich .author-avatar img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
.author-box-rich .author-content{min-width:0!important}
.author-box-rich .author-heading{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;margin-bottom:4px!important}
.author-box-rich .author-heading .eyebrow{margin:0!important}
.author-box-rich .author-count{font-size:11.5px!important;color:#6c8195!important;background:#f5f9fd!important;border:1px solid #e0eaf3!important;border-radius:999px!important;padding:4px 8px!important}
.author-box-rich h3{font-size:21px!important;margin:3px 0 6px!important;line-height:1.25!important}
.author-box-rich p{font-size:14.5px!important;line-height:1.65!important;color:#63788c!important;margin:0!important;max-width:760px!important}
.author-actions{display:flex!important;gap:12px!important;align-items:center!important;flex-wrap:wrap!important;margin-top:12px!important}
.author-link{display:inline-flex!important;align-items:center!important;gap:6px!important;font-size:13px!important;font-weight:700!important;color:var(--tino-270-blue)!important;text-decoration:none!important}
.author-link:hover{color:#0758b8!important;text-decoration:underline!important;text-underline-offset:3px!important}
.author-link-secondary{color:#61788e!important}

/* --------------------------------------------------------------------------
   Footer bottom must span full viewport, not only the content container
   -------------------------------------------------------------------------- */
.footer-bottom{width:100%!important;background:#f8fbfd!important;border-top:1px solid #e5edf4!important;color:#8091a1!important;padding:0!important;margin:0!important}
.footer-bottom-inner{min-height:54px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important}
.footer::after{display:none!important}

/* --------------------------------------------------------------------------
   Defensive card sizing + badges
   -------------------------------------------------------------------------- */
.feature-large .badge,.post-card .badge,.category-mini .badge{box-sizing:border-box!important}
.feature-large,.post-card,.category-mini{min-width:0!important}
.feature-large h3,.post-card h3,.category-mini h3{overflow-wrap:anywhere}

/* Motion should never change layout dimensions. */
.tino-motion-ready .tino-reveal{will-change:transform,opacity}

@media(max-width:1100px){
  .home-feature .feature-grid,.category-top{grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr)!important}
  .home-feature .small-grid .post-card{grid-template-columns:112px minmax(0,1fr)!important}
  .home-feature .small-grid .post-card-media{width:112px!important}
  .category-mini{grid-template-columns:112px minmax(0,1fr)!important}
  .category-mini>div:first-child{width:112px!important}
}
@media(max-width:980px){
  .home-hero .lead.has-featured-image .lead-content{max-width:82%}
  .home-feature .feature-grid,.category-top,.connect-grid{grid-template-columns:1fr!important}
  .home-feature .small-grid{grid-template-rows:none!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;height:auto!important}
  .home-feature .small-grid .post-card{min-height:112px!important}
  .category-side{grid-template-rows:none!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;height:auto!important}
  .category-mini{display:flex!important;flex-direction:column!important;align-items:stretch!important;height:auto!important}
  .category-mini>div:first-child{width:100%!important}
  .related-posts .small-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
  .home-hero .lead.has-featured-image .lead-content{max-width:100%}
  .home-hero .side-feature{grid-template-columns:112px minmax(0,1fr)!important}
  .home-hero .side-feature-media{width:112px!important}
  .home-feature .small-grid,.category-side,.related-posts .small-grid{grid-template-columns:1fr!important}
  .home-feature .small-grid .post-card{grid-template-columns:112px minmax(0,1fr)!important}
  .connect-panel{padding:21px!important}
  .connect-newsletter{padding-left:21px!important}
  .author-box-rich{grid-template-columns:64px minmax(0,1fr)!important;gap:14px!important;padding:18px!important}
  .author-box-rich .author-avatar{width:64px!important;height:64px!important;border-radius:14px!important}
  .author-box-rich h3{font-size:19px!important}
  .author-actions{grid-column:1/-1!important}
}
@media(max-width:480px){
  .home-hero .side-feature{grid-template-columns:94px minmax(0,1fr)!important;gap:11px!important}
  .home-hero .side-feature-media{width:94px!important}
  .home-feature .small-grid .post-card{grid-template-columns:96px minmax(0,1fr)!important}
  .home-feature .small-grid .post-card-media{width:96px!important}
  .related-posts{padding:17px!important}
  .author-box-rich{grid-template-columns:1fr!important}
  .author-box-rich .author-avatar{width:72px!important;height:72px!important}
}

@media(prefers-reduced-motion:reduce){
  .feature-large:hover img,.post-card:hover img,.category-mini:hover img{transform:none!important}
}
