/* TV Kikinda — breaking news pop-up on the home page (template-parts/breaking.php, assets/js/breaking.js).
   Dark in both themes, like the on-air lower third: red "Udarna vest" plate, the picture cut on the brand slant. */
.breaking {
  --focus: var(--orange);
  position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; padding: 24px var(--gutter);
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(7, 7, 26, .74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.breaking[hidden] { display: none; }
.breaking.is-open { opacity: 1; }

/* margin:auto centres the card, and still lets a card taller than the screen scroll from its top */
.breaking__card {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  width: min(980px, 100%); margin: auto; border-radius: var(--r-lg); color: #fff;
  background: radial-gradient(120% 120% at 100% 0%, #1b2a7a 0%, rgba(27, 42, 122, 0) 60%), var(--navy-900);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85);
  transform: translateY(32px) scale(.97); transition: transform .55s var(--ease-out);
}
.breaking.is-open .breaking__card { transform: none; }
.breaking__card--text { grid-template-columns: minmax(0, 1fr); width: min(680px, 100%); }
/* the red and orange rule along the bottom edge, as under the station's captions */
.breaking__card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg, var(--live) 0 38%, var(--orange) 38%);
}

/* The picture, cut on the 16° slant where it meets the text (in cqh, so the cut keeps its angle at any height). */
.breaking__media { position: relative; container-type: size; min-height: 360px; overflow: hidden; }
.breaking__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: polygon(0 0, 100% 0, calc(100% - 28.7cqh) 100%, 0 100%);
}
.breaking__media::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 7px;
  background: var(--orange); transform: skewX(var(--skew)); transform-origin: 100% 0;
}

.breaking__body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(30px, 3.6vw, 48px) clamp(24px, 3.6vw, 48px) clamp(30px, 3.4vw, 44px);
}
.breaking__media + .breaking__body { padding-left: clamp(14px, 1.6vw, 24px); }
.breaking__flag { margin: 0 0 4px 6px; padding: 9px 16px; font-size: .9rem; letter-spacing: .16em; }
.breaking__flag > span { gap: 10px; }
.breaking__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; font-size: .9rem; color: rgba(255, 255, 255, .72); }
.breaking__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.breaking__meta .kicker { color: #fff; }
.breaking__title { margin: 0; font: italic 900 clamp(1.8rem, 1.25rem + 1.7vw, 2.7rem)/1.02 var(--font-display); text-wrap: balance; overflow-wrap: break-word; }
.breaking__text {
  margin: 0; max-width: 58ch; font-size: 1.02rem; line-height: 1.55; color: rgba(255, 255, 255, .8);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.breaking__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: auto; padding: 12px 0 0 8px; }
.breaking .btn--ghost { color: #fff; }
.breaking .btn--ghost::before { border-color: rgba(255, 255, 255, .34); }
.breaking .btn--ghost:hover { color: var(--navy-950); }
.breaking .btn--ghost:hover::before { background: #fff; border-color: #fff; }
.breaking__close { position: absolute; z-index: 2; top: 10px; right: 10px; background: rgba(7, 7, 26, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Entrance: the plate wipes in on the slant, then the text rises line by line. Transitions, not animations, so the
   site's motion pause (which holds animations) can never leave the pop-up half drawn. */
.breaking__flag { clip-path: inset(-30% 100% -30% -10%); transition: clip-path .55s var(--ease-out) .15s; }
.breaking.is-open .breaking__flag { clip-path: inset(-30% -10% -30% -10%); }
.breaking__meta, .breaking__title, .breaking__text, .breaking__actions {
  opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease-out), transform .6s var(--ease-out);
}
.breaking.is-open :is(.breaking__meta, .breaking__title, .breaking__text, .breaking__actions) { opacity: 1; transform: none; }
.breaking.is-open .breaking__meta { transition-delay: .2s; }
.breaking.is-open .breaking__title { transition-delay: .26s; }
.breaking.is-open .breaking__text { transition-delay: .32s; }
.breaking.is-open .breaking__actions { transition-delay: .38s; }

/* Phones: a sheet from the bottom, the picture on top. */
@media (max-width: 719px) {
  .breaking { padding: 12px 12px max(12px, env(safe-area-inset-bottom)); }
  .breaking__card { grid-template-columns: minmax(0, 1fr); width: 100%; margin: auto 0 0; }
  .breaking__media { container-type: normal; min-height: 0; aspect-ratio: 16 / 9; }
  .breaking__media img { clip-path: none; }
  .breaking__media::after { display: none; }
  .breaking__body, .breaking__media + .breaking__body { gap: 12px; padding: 22px 20px 28px; }
  .breaking__text { -webkit-line-clamp: 2; line-clamp: 2; }
  .breaking__actions { gap: 10px 16px; }
  .breaking__actions .btn { min-height: 46px; padding: 0 20px; font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .breaking__card, .breaking__meta, .breaking__title, .breaking__text, .breaking__actions { transform: none; transition: opacity .2s; }
  .breaking__flag { clip-path: none; transition: none; }
}

@media print { .breaking { display: none !important; } }