/*
  KÖNNEN Supply Chain Solutions — sitio web
  Concepto, diseño y desarrollo: Rodolfo Zavala · 2026
  Créditos completos: /humans.txt
*/
/* ===== BLOG — page-specific styles ========================================
   Shares :root tokens, reset, header/nav, mobile menu and footer from
   styles.css (loaded first). Standard blog-index anatomy: a plain title
   strip (no full dark hero — this is an index page, not a solution
   landing), category filter pills, one featured post, a card grid, and a
   newsletter strip. */

/* ---- TITLE STRIP — simple, just enough to clear the fixed header ---- */
.blog-hero{background:var(--white); padding:150px 0 50px;}
.blog-hero-copy{max-width:680px;}
.blog-hero-copy .eyebrow{margin-bottom:10px;}
.blog-hero-copy h1{
  color:var(--ink); font-size:clamp(30px,3.6vw,42px);
}
.blog-hero-copy h1 .accent{color:var(--orange);}
.blog-hero-copy p{color:var(--silver-3); font-size:15.5px; line-height:1.65; max-width:520px; margin-top:14px;}

/* ---- CATEGORY FILTER ---- */
.blog-cats{background:var(--paper); border-bottom:1px solid var(--line); padding:20px 0;}
.blog-cat-row{display:flex; gap:10px; overflow-x:auto; scrollbar-width:none;}
.blog-cat-row::-webkit-scrollbar{display:none;}
.blog-cat-pill{
  flex-shrink:0; font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--silver-3); background:var(--white);
  padding:10px 18px; border:1px solid var(--line); border-radius:999px; cursor:pointer;
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.blog-cat-pill:hover{color:var(--ink); border-color:var(--ink);}
.blog-cat-pill.is-active{background:var(--ink); border-color:var(--ink); color:#fff;}
/* sub-pills for the two Seguridad tracks — smaller and orange-tinted so
   they read as nested under the main "Seguridad" pill, not siblings of it */
.blog-cat-pill--sub{
  font-size:11px; padding:8px 14px; color:var(--orange);
  background:var(--orange-dim); border-color:var(--orange-dim);
}
.blog-cat-pill--sub:hover{border-color:var(--orange); color:var(--orange);}
.blog-cat-pill--sub.is-active{background:var(--orange); border-color:var(--orange); color:#fff;}

/* ---- FEATURED POST ---- */
.blog-featured-wrap{padding:90px 0 40px;}
.blog-featured{
  display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;
  padding-bottom:70px; border-bottom:1px solid var(--line);
}
.blog-featured-media{position:relative; border-radius:6px; overflow:hidden; aspect-ratio:16/11; background:var(--black);}
.blog-featured-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.blog-featured-media:hover img{transform:scale(1.05);}
.blog-tag{
  display:inline-flex; align-items:center; font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange); background:var(--orange-dim); padding:6px 13px; border-radius:999px; margin-bottom:16px;
}
.blog-featured-copy h2{font-size:clamp(26px,3vw,38px); margin-bottom:16px;}
.blog-featured-copy p{font-size:15.5px; line-height:1.75; color:var(--silver-3); max-width:520px; margin-bottom:20px;}
.blog-meta{
  display:flex; align-items:center; gap:10px;
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--silver-3);
}
.blog-meta span:nth-child(2){width:3px; height:3px; border-radius:50%; background:var(--silver-3); flex-shrink:0;}

/* ---- GRID ---- */
.blog-grid-wrap{padding:60px 0 110px;}
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px 32px;}
.blog-card{display:block; cursor:pointer;}
.blog-card-title{transition:color .25s ease;}
.blog-card:hover .blog-card-title{color:var(--orange);}
.blog-card:focus-visible, .blog-featured:focus-visible{outline:2px solid var(--orange); outline-offset:6px; border-radius:6px;}
.blog-featured{cursor:pointer;}
.blog-featured:hover h2{color:var(--orange);}
.blog-featured h2{transition:color .25s ease;}
/* "read the full article" hint — added by blog.js to every card that has
   a .blog-article body, so it's obvious the card opens something */
.blog-read{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--orange);
}
.blog-read svg{width:13px; height:13px; transition:transform .25s ease;}
.blog-card:hover .blog-read svg, .blog-featured:hover .blog-read svg{transform:translateX(4px);}
/* full article text lives inside each card, hidden — blog.js copies it
   into the reading modal on click */
.blog-article[hidden]{display:none;}
.blog-card-media{position:relative; border-radius:6px; overflow:hidden; aspect-ratio:4/3; background:var(--black); margin-bottom:20px;}
.blog-card-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.blog-card:hover .blog-card-media img{transform:scale(1.06);}
.blog-card-title{font-size:19px; line-height:1.25; text-transform:none; letter-spacing:0; font-weight:700; margin-bottom:10px; color:var(--ink);}
.blog-card-excerpt{
  font-size:13.5px; line-height:1.65; color:var(--silver-3); margin-bottom:14px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-card .blog-meta{font-size:10.5px;}
.blog-card.is-hidden{display:none;}

/* ---- VIDEO TEASER CARDS — inline YouTube Shorts, same tap-to-embed
   facade as the homepage reels (.reel-* classes come from styles.css,
   loaded before this file). True 9/16 Shorts aspect — not the 4/3 of the
   photo cards around them — so YouTube's player fills edge to edge instead
   of pillarboxing with black bars down the sides. ---- */
.blog-card-media--short{aspect-ratio:9/16;}
.blog-card-media.is-playing .reel-embed-trigger{display:none;}

/* ---- IMAGE FALLBACK — same convention used across the ship pages for
   photos that haven't been uploaded yet ---- */
.img-slot{position:relative;}
.slot-fallback{
  position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:20px; background:var(--off-white); color:var(--silver-3);
}
.img-slot.img-fallback img{display:none;}
.img-slot.img-fallback .slot-fallback{display:flex;}
.slot-cam-icon{width:28px; height:28px; color:var(--silver-3); opacity:.7;}
.slot-fallback b{font-family:var(--ff-body); font-size:12.5px; font-weight:600; color:var(--silver-3); max-width:200px;}
.slot-fallback span{font-family:var(--ff-mono); font-size:9.5px; color:var(--silver-3); opacity:.7; word-break:break-all;}

/* ---- NEWSLETTER STRIP ---- */
.blog-news{background:var(--black); color:#fff; padding:100px 0; text-align:center;}
.blog-news .eyebrow{justify-content:center; color:var(--orange);}
.blog-news h2{color:#fff; margin-top:10px;}
.blog-news h2 .accent{color:var(--orange);}
.blog-news p{color:var(--silver-2); max-width:480px; margin:20px auto 34px;}
.blog-news-form{display:flex; gap:12px; max-width:440px; margin:0 auto; flex-wrap:wrap; justify-content:center;}
.blog-news-form input{
  flex:1; min-width:220px; font-family:var(--ff-body); font-size:14px; color:#fff;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.2); border-radius:3px;
  padding:14px 16px; outline:none; transition:border-color .2s ease, background .2s ease;
}
.blog-news-form input::placeholder{color:var(--silver-3);}
.blog-news-form input:focus{border-color:var(--orange); background:rgba(255,255,255,.08);}
.blog-news-status{margin:16px 0 0; font-family:var(--ff-mono); font-size:12.5px; color:var(--silver-2); min-height:1em;}
.blog-news-status.is-success{color:var(--orange);}

/* ---- READING MODAL — floating rectangle with the full article + its
   references. Same backdrop/fade language as the privacy notice in
   styles.css, just wider and scrollable inside. ---- */
.blog-modal{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px;}
.blog-modal[hidden]{display:none;}
body.blog-modal-open{overflow:hidden;}
.blog-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(8,8,9,.65); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s ease;
}
.blog-modal.is-open .blog-modal-backdrop{opacity:1;}
.blog-modal-card{
  position:relative; z-index:1; width:100%; max-width:760px; max-height:min(88vh, 920px);
  display:flex; flex-direction:column;
  background:var(--white); border-radius:14px; overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.45);
  opacity:0; transform:translateY(24px) scale(.98);
  transition:opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.blog-modal.is-open .blog-modal-card{opacity:1; transform:translateY(0) scale(1);}
.blog-modal-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,8,9,.6); color:#fff; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .2s ease;
}
.blog-modal-close:hover{background:var(--orange);}
.blog-modal-close svg{width:18px; height:18px;}
.blog-modal-scroll{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;}
.blog-modal-media{aspect-ratio:16/7; background:var(--black); overflow:hidden;}
.blog-modal-media:empty{display:none;}
.blog-modal-media img{width:100%; height:100%; object-fit:cover; display:block;}
.blog-modal-body{padding:40px 52px 52px;}
.blog-modal-body.no-media{padding-top:64px;}
.blog-modal-body h2{font-size:clamp(24px,3vw,34px); line-height:1.15; margin-bottom:16px; color:var(--ink);}
.blog-modal-body .blog-meta{margin-bottom:30px; padding-bottom:24px; border-bottom:1px solid var(--line);}
.blog-modal-content p{font-size:15.5px; line-height:1.8; color:var(--ink); margin-bottom:18px;}
.blog-modal-content h4{
  font-family:var(--ff-body); font-size:17px; font-weight:700; text-transform:none; letter-spacing:0;
  color:var(--ink); margin:32px 0 10px;
}
.blog-modal-content ul{padding-left:20px; margin:0 0 20px;}
.blog-modal-content li{font-size:15px; line-height:1.7; color:var(--ink); margin-bottom:8px;}
.blog-modal-content li::marker{color:var(--orange);}
.blog-modal-content .accent{color:var(--orange);}
/* "Conocer <solución>" — only on the Visión KÖNNEN posts, links out to
   the solution page the article is about */
.blog-article-cta{margin:32px 0 0;}
.blog-article-cta .btn{display:inline-flex; align-items:center; gap:10px;}
.blog-article-cta .btn svg{width:16px; height:16px; transition:transform .25s ease;}
.blog-article-cta .btn:hover svg{transform:translateX(4px);}
.blog-article-refs{margin-top:40px; padding-top:26px; border-top:1px solid var(--line);}
.blog-article-refs h5{
  font-family:var(--ff-mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--silver-3); margin-bottom:14px;
}
.blog-article-refs ol{padding-left:20px; margin:0;}
.blog-article-refs li{font-size:13px; line-height:1.6; color:var(--silver-3); margin-bottom:8px;}
.blog-article-refs li::marker{color:var(--silver-3);}
.blog-article-refs a{color:var(--orange); text-decoration:underline; text-underline-offset:2px; word-break:break-word;}
@media (prefers-reduced-motion: reduce){
  .blog-modal-backdrop, .blog-modal-card{transition:none;}
}

/* ---- RESPONSIVE ---- */
@media (max-width:980px){
  .blog-featured{grid-template-columns:1fr; gap:32px;}
  .blog-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:700px){
  .blog-hero{padding:140px 0 60px;}
  .blog-featured-wrap{padding:56px 0 20px;}
  .blog-grid-wrap{padding:40px 0 80px;}
  .blog-grid{grid-template-columns:1fr;}
  .blog-news{padding:70px 0;}
  .blog-news-form{flex-direction:column; align-items:stretch;}
  .blog-modal{padding:12px;}
  .blog-modal-card{max-height:calc(100dvh - 24px);}
  .blog-modal-body{padding:28px 22px 36px;}
  .blog-modal-body.no-media{padding-top:60px;}
  .blog-modal-content p{font-size:15px;}
}