/* ============================================================
 * news-ticker section
 * Rendered from resources/views/components/sections/news-ticker.blade.php
 * ============================================================ */

.nt {
        background:
          linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 85%, rgba(0,0,0,0.18) 100%),
          linear-gradient(90deg, #1B0F5E 0%, #241773 50%, #1B0F5E 100%);
        color: #F7F1E8;
        border-block: 1px solid rgba(233, 197, 138, 0.22);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.05),
          0 1px 0 rgba(0,0,0,0.25);
        overflow: hidden;
        position: relative;
      }
      /* Subtle brass hairlines top + bottom */
      .nt::before, .nt::after {
        content: '';
        position: absolute;
        left: 0; right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0, rgba(233,197,138,0.55) 20%, rgba(233,197,138,0.55) 80%, transparent);
        pointer-events: none;
      }
      .nt::before { top: 0; }
      .nt::after  { bottom: 0; }

      .nt__stripe {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding-block: clamp(1rem, 1.8vw, 1.4rem);
      }
      .nt__eyebrow {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1.1rem 0.5rem 0.95rem;
        margin-left: clamp(1.25rem, 4vw, 2.25rem);
        font-family: var(--font-body-stack, 'Urbanist', 'Inter', system-ui, sans-serif);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: #1B0F5E;
        background: linear-gradient(180deg, #E9C58A 0%, #B68A45 100%);
        border-radius: 999px;
        box-shadow:
          0 4px 12px -6px rgba(0,0,0,0.5),
          inset 0 1px 0 rgba(255,255,255,0.35);
        position: relative;
        z-index: 2;
      }
      /* Pulsing dot on the LATEST pill */
      .nt__eyebrow::before {
        content: '';
        width: 7px; height: 7px;
        border-radius: 999px;
        background: #1B0F5E;
        box-shadow: 0 0 0 0 rgba(27, 15, 94, 0.6);
        animation: nt-pulse 2s ease-in-out infinite;
      }
      @keyframes nt-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(27, 15, 94, 0.55); }
        50%      { box-shadow: 0 0 0 6px rgba(27, 15, 94, 0); }
      }

      .nt__viewport {
        flex: 1;
        overflow: hidden;
        min-width: 0;
        position: relative;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent);
        mask-image:         linear-gradient(90deg, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent);
      }
      .nt__track {
        display: flex;
        align-items: center;
        gap: 3rem;
        margin: 0;
        padding: 0;
        list-style: none;
        white-space: nowrap;
        width: max-content;
        animation: nt-scroll 55s linear infinite;
        will-change: transform;
      }
      .nt__viewport:hover .nt__track,
      .nt__viewport:focus-within .nt__track {
        animation-play-state: paused;
      }
      @keyframes nt-scroll {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
      }
      .nt__item {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        font-family: var(--font-body-stack, 'Urbanist', 'Inter', system-ui, sans-serif);
        font-size: clamp(0.95rem, 1.1vw, 1.05rem);
        font-weight: 500;
        color: rgba(247, 241, 232, 0.94);
        line-height: 1;
      }
      /* Diamond separator between items */
      .nt__dot {
        width: 6px; height: 6px;
        background: #E9C58A;
        transform: rotate(45deg);
        opacity: 0.85;
        flex-shrink: 0;
        box-shadow: 0 0 8px rgba(233, 197, 138, 0.35);
      }
      .nt__link, .nt__text { color: inherit; text-decoration: none; transition: color 180ms ease; }
      .nt__link {
        position: relative;
        padding-block: 0.1rem;
      }
      .nt__link::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: -2px;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 260ms cubic-bezier(0.4,0,0.2,1);
      }
      .nt__link:hover, .nt__link:focus-visible {
        color: #E9C58A;
        outline: none;
      }
      .nt__link:hover::after, .nt__link:focus-visible::after {
        transform: scaleX(1);
      }
      .nt__badge {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        padding: 0.32rem 0.7rem;
        border-radius: 3px;
        background: rgba(233, 197, 138, 0.16);
        color: #E9C58A;
        border: 1px solid rgba(233, 197, 138, 0.32);
        line-height: 1;
      }
      .nt__badge--course { background: rgba(233, 197, 138, 0.14); color: #E9C58A; border-color: rgba(233, 197, 138, 0.35); }
      .nt__badge--event  { background: rgba(169, 192, 218, 0.14); color: #C6D6EA; border-color: rgba(169, 192, 218, 0.35); }
      .nt__badge--new    { background: rgba(125, 191, 160, 0.14); color: #9DD4B8; border-color: rgba(125, 191, 160, 0.38); }

      @media (max-width: 40rem) {
        .nt__eyebrow { font-size: 0.66rem; letter-spacing: 0.22em; padding: 0.45rem 0.9rem 0.45rem 0.8rem; }
        .nt__stripe { gap: 1rem; }
        .nt__track { gap: 2.25rem; animation-duration: 42s; }
      }

      @media (prefers-reduced-motion: reduce) {
        .nt__track { animation: none; flex-wrap: wrap; white-space: normal; padding-inline: clamp(1rem, 4vw, 2rem); }
        .nt__viewport { mask-image: none; -webkit-mask-image: none; }
        .nt__eyebrow::before { animation: none; }
      }