/* ============================================================
   LITALK Blog — editorial/newsroom layout
   Inspired by premium newsroom hierarchy, expressed with LITALK tokens.
   ============================================================ */

.blog-editorial { padding-top: 68px; }
.blog-editorial__masthead { padding: 76px 0 52px; border-bottom: 1px solid var(--clr-border); }
.blog-editorial__eyebrow { display:block; margin-bottom:14px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--clr-muted); }
.blog-editorial__title { max-width:900px; font-size:clamp(48px,7vw,84px); font-weight:800; line-height:.98; letter-spacing:-.055em; }
.blog-editorial__intro { max-width:700px; margin-top:24px; font-size:clamp(18px,2vw,22px); line-height:1.55; color:var(--clr-muted); }
.blog-editorial__section { padding:78px 0; border-bottom:1px solid var(--clr-border); }
.blog-editorial__section:last-child { border-bottom:0; }
.blog-editorial__section-head { display:flex; align-items:end; justify-content:space-between; gap:28px; margin-bottom:34px; }
.blog-editorial__section-title { font-size:clamp(30px,4vw,44px); line-height:1.08; letter-spacing:-.035em; }
.blog-editorial__section-sub { max-width:620px; margin-top:10px; font-size:16px; line-height:1.6; color:var(--clr-muted); }
.blog-editorial__section-link { flex:0 0 auto; min-height:44px; display:inline-flex; align-items:center; font-size:14px; font-weight:700; color:var(--clr-muted); transition:color var(--transition-fast),transform var(--transition-fast); }
.blog-editorial__section-link:hover { color:var(--clr-black); transform:translateX(2px); }

/* Blog discovery/search — paired with the shared floating menu. */
.blog-discovery {
  --blog-menu-open-dur:250ms;
  --blog-menu-close-dur:150ms;
  --blog-menu-pre-scale:.97;
  --blog-menu-closing-scale:.99;
  --blog-menu-origin:top right;
  --blog-menu-ease:cubic-bezier(.22,1,.36,1);
  position:sticky;
  top:100px;
  z-index:var(--z-sticky);
  background:transparent;
  padding:24px 0 54px;
  pointer-events:none;
}
.blog-discovery .container { pointer-events:auto; }
.blog-discovery__bar {
  position:relative;
  min-height:74px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:10px 14px 10px 24px;
  border:1px solid var(--nav-border);
  border-radius:999px;
  background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 10px 34px rgba(0,0,0,.10);
}
.blog-discovery__search { min-width:0; display:flex; align-items:center; gap:14px; }
.blog-discovery__search i { flex:0 0 auto; font-size:20px; color:var(--clr-muted); }
.blog-discovery__search input { width:100%; min-height:52px; border:0; outline:0; background:transparent; color:var(--clr-black); font:inherit; font-size:18px; }
.blog-discovery__search input::placeholder { color:var(--clr-muted); opacity:1; }
.blog-discovery__menu { position:relative; }
.blog-discovery__menu-trigger {
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 16px;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  color:var(--clr-black);
  background:transparent;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);
}
.blog-discovery__menu-trigger:hover,
.blog-discovery__menu-trigger[aria-expanded="true"] { background:var(--clr-bg); border-color:var(--clr-border); }
.blog-discovery__menu-trigger i { font-size:11px; transition:transform var(--blog-menu-open-dur) var(--blog-menu-ease); }
.blog-discovery__menu-trigger[aria-expanded="true"] i { transform:rotate(180deg); }

/* transitions.dev — Menu dropdown: origin-aware open/close. */
.blog-discovery__dropdown {
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  width:min(290px,calc(100vw - 48px));
  padding:8px;
  border:1px solid var(--nav-border);
  border-radius:20px;
  background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  backdrop-filter:saturate(180%) blur(24px);
  box-shadow:0 18px 50px rgba(0,0,0,.16);
  transform-origin:var(--blog-menu-origin);
  transform:translateY(-6px) scale(var(--blog-menu-pre-scale));
  opacity:0;
  filter:blur(2px);
  visibility:hidden;
  pointer-events:none;
  transition:
    transform var(--blog-menu-close-dur) var(--blog-menu-ease),
    opacity var(--blog-menu-close-dur) var(--blog-menu-ease),
    filter var(--blog-menu-close-dur) var(--blog-menu-ease),
    visibility 0s linear var(--blog-menu-close-dur);
}
.blog-discovery__dropdown.is-open {
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  opacity:1;
  filter:blur(0);
  transition:
    transform var(--blog-menu-open-dur) var(--blog-menu-ease),
    opacity var(--blog-menu-open-dur) var(--blog-menu-ease),
    filter var(--blog-menu-open-dur) var(--blog-menu-ease),
    visibility 0s linear 0s;
}
.blog-discovery__dropdown.is-closing { transform:translateY(-3px) scale(var(--blog-menu-closing-scale)); }
.blog-discovery__dropdown-item {
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:13px;
  color:var(--clr-secondary);
  font-size:13px;
  font-weight:600;
  text-align:left;
  transition:background var(--transition-fast),color var(--transition-fast);
}
.blog-discovery__dropdown-item:hover,
.blog-discovery__dropdown-item:focus-visible { background:var(--clr-bg); color:var(--clr-black); }
.blog-discovery__dropdown-item.active { background:var(--clr-black); color:var(--clr-bg); }
.blog-discovery__dropdown-item--all { font-weight:700; color:var(--clr-black); }
.blog-discovery__dropdown-item--all i { font-size:11px; }
.blog-discovery__dropdown-separator { height:1px; margin:6px 4px; background:var(--clr-border); }

.blog-discovery-results { background:var(--clr-bg); }
.blog-discovery-results__list { border-top:1px solid var(--clr-border); }
.blog-discovery-results__list .blog-more-item:last-child { border-bottom:0; }

.blog-featured-layout { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(260px,.8fr); gap:44px; align-items:start; }
.blog-featured { min-width:0; }
.blog-featured__media,.blog-tile__media { overflow:hidden; background:var(--clr-light-bg); }
.blog-featured__media { aspect-ratio:16/9; border-radius:var(--radius-lg); }
.blog-featured__media img,.blog-featured__media video,.blog-tile__media img,.blog-tile__media video { width:100%; height:100%; object-fit:cover; transition:transform var(--duration-medium) var(--ease-smooth-out); }
.blog-featured__media--placeholder,.blog-tile__media--placeholder { display:grid; place-items:center; color:var(--clr-muted); font-size:13px; font-weight:800; letter-spacing:.14em; }
.blog-featured:hover .blog-featured__media img,.blog-featured:hover .blog-featured__media video,.blog-tile:hover .blog-tile__media img,.blog-tile:hover .blog-tile__media video { transform:scale(1.015); }
.blog-featured__content { padding-top:24px; }
.blog-editorial__category { display:block; margin-bottom:10px; color:var(--clr-muted); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.blog-featured__title { max-width:900px; font-size:clamp(30px,4vw,48px); font-weight:750; line-height:1.08; letter-spacing:-.04em; }
.blog-featured__excerpt { max-width:760px; margin-top:15px; color:var(--clr-muted); font-size:17px; line-height:1.6; }
.blog-editorial__date { display:block; margin-top:15px; font-size:13px; color:var(--clr-muted); }
.blog-latest-panel { border-top:1px solid var(--clr-border); }
.blog-latest-panel__heading { padding:18px 0 13px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--clr-muted); }
.blog-latest-item { display:block; padding:22px 0; border-top:1px solid var(--clr-border); }
.blog-latest-item__category { display:block; margin-bottom:7px; color:var(--clr-muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.blog-latest-item__title { font-size:clamp(18px,2vw,24px); font-weight:700; line-height:1.22; letter-spacing:-.025em; }
.blog-latest-item:hover .blog-latest-item__title,.blog-newsroom-item:hover .blog-newsroom-item__title,.blog-more-item:hover .blog-more-item__title { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.blog-editorial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 24px; }
.blog-tile { min-width:0; }
.blog-tile__media { aspect-ratio:16/10; border-radius:var(--radius); }
.blog-tile__body { padding-top:17px; }
.blog-tile__title { font-size:clamp(20px,2.2vw,28px); font-weight:700; line-height:1.18; letter-spacing:-.03em; }
.blog-tile__excerpt { margin-top:10px; color:var(--clr-muted); line-height:1.55; font-size:14px; }
.blog-editorial__topics { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:28px; color:var(--clr-muted); font-size:13px; font-weight:600; }
.blog-newsroom-list,.blog-more-list { border-top:1px solid var(--clr-border); }
.blog-newsroom-item,.blog-more-item { display:grid; grid-template-columns:150px minmax(0,1fr) 150px; gap:28px; align-items:baseline; padding:24px 0; border-bottom:1px solid var(--clr-border); }
.blog-newsroom-item__type,.blog-more-item__type { color:var(--clr-muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.blog-newsroom-item__title,.blog-more-item__title { font-size:clamp(19px,2vw,26px); font-weight:700; line-height:1.24; letter-spacing:-.025em; }
.blog-newsroom-item__date,.blog-more-item__date { justify-self:end; text-align:right; color:var(--clr-muted); font-size:13px; }
.blog-editorial__empty { padding:28px 0; color:var(--clr-muted); font-size:15px; }
.blog-editorial__skeleton { min-height:220px; border-radius:var(--radius-lg); background:var(--clr-light-bg); animation:blog-editorial-pulse 1.4s ease-in-out infinite alternate; }
@keyframes blog-editorial-pulse { from{opacity:.62} to{opacity:1} }

@media (max-width:900px) {
  .blog-editorial__masthead { padding-top:62px; }
  .blog-featured-layout { grid-template-columns:1fr; gap:48px; }
  .blog-latest-panel { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 22px; }
  .blog-latest-panel__heading { grid-column:1/-1; }
  .blog-editorial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:640px) {
  .blog-editorial { padding-top:86px; }
  .blog-editorial__masthead { padding:54px 0 34px; }
  .blog-discovery { top:94px; padding:28px 0 52px; }
  .blog-discovery__bar { min-height:70px; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:8px 10px 8px 18px; border-radius:999px; }
  .blog-discovery__search { gap:12px; }
  .blog-discovery__search i { font-size:18px; }
  .blog-discovery__search input { min-height:48px; font-size:16px; }
  .blog-discovery__menu-trigger { min-height:46px; padding:0 10px; font-size:14px; }
  .blog-discovery__dropdown { top:calc(100% + 10px); right:-2px; width:min(276px,calc(100vw - 44px)); border-radius:18px; }
  .blog-editorial__section { padding:56px 0; }
  .blog-editorial__section-head { display:block; margin-bottom:26px; }
  .blog-editorial__section-link { margin-top:10px; }
  .blog-featured__media,.blog-tile__media { border-radius:var(--radius-sm); }
  .blog-latest-panel { display:block; }
  .blog-editorial-grid { grid-template-columns:1fr; gap:36px; }
  .blog-newsroom-item,.blog-more-item { grid-template-columns:1fr; gap:7px; padding:21px 0; }
  .blog-newsroom-item__date,.blog-more-item__date { justify-self:start; text-align:left; }
}

@media (prefers-reduced-motion:reduce) {
  .blog-discovery__dropdown,
  .blog-discovery__menu-trigger i { transition:none !important; }
}