/* =========================================================
   DANCE SCIENCE 2026
   NEWS ARTICLE TEMPLATE

   Used by:
   /news/registrations-open
   /news/call-for-abstracts
   /news/round-tables
   /news/venue-thessaloniki
   etc.

   Depends on global variables and utilities
   already defined in styles.css.
========================================================= */


/* =========================================================
   01 — ARTICLE ROOT
========================================================= */

.news-article {
    background: var(--ivory);
    color: var(--charcoal);
  }
  
  
  /* =========================================================
     02 — ARTICLE HERO
  ========================================================= */
  
  .news-article__hero {
    position: relative;
    overflow: hidden;
  
    padding:
      clamp(150px, 14vw, 205px)
      0
      clamp(72px, 8vw, 115px);
  
    background: var(--ivory);
  
    border-bottom:
      1px solid var(--warm-gray);
  }
  
  
  /*
     Soft brand movement line.
     Gives the article pages a visual relationship
     with the main conference hero.
  */
  
  .news-article__hero::before {
    content: "";
  
    position: absolute;
  
    width: 820px;
    height: 360px;
  
    right: -180px;
    top: -120px;
  
    border:
      1px solid rgba(184, 92, 61, .18);
  
    border-radius:
      48% 52% 63% 37% /
      56% 42% 58% 44%;
  
    transform:
      rotate(-12deg);
  
    pointer-events: none;
  }
  
  
  /* Second subtle movement line */
  
  .news-article__hero::after {
    content: "";
  
    position: absolute;
  
    width: 560px;
    height: 210px;
  
    right: -70px;
    top: 35px;
  
    border-top:
      1px solid rgba(184, 92, 61, .28);
  
    border-radius: 50%;
  
    transform:
      rotate(7deg);
  
    pointer-events: none;
  }
  
  
  /* =========================================================
     03 — HERO GRID
  ========================================================= */
  
  .news-article__hero-grid {
    position: relative;
    z-index: 2;
  
    display: grid;
  
    grid-template-columns:
      minmax(0, 1.05fr)
      minmax(360px, .95fr);
  
    gap:
      clamp(48px, 6vw, 90px);
  
    align-items: end;
  }
  
  
  /* =========================================================
     04 — HERO INTRO
  ========================================================= */
  
  .news-article__intro {
    max-width: 780px;
  }
  
  
  /* =========================================================
     05 — BREADCRUMB
  ========================================================= */
  
  .news-article__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  
    gap: 9px;
  
    margin-bottom: 36px;
  
    color: var(--muted);
  
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 600;
  
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  
  
  .news-article__breadcrumb a {
    color: inherit;
  
    text-decoration: none;
  
    transition:
      color 180ms ease;
  }
  
  
  .news-article__breadcrumb a:hover,
  .news-article__breadcrumb a:focus-visible {
    color: var(--terracotta);
  }
  
  
  .news-article__breadcrumb span[aria-hidden="true"] {
    opacity: .45;
  }
  
  
  /* =========================================================
     06 — ARTICLE H1
  ========================================================= */
  
  .news-article__intro h1 {
    max-width: 900px;
  
    margin:
      18px
      0
      28px;
  
    font-family: var(--font-display);
  
    font-size:
      clamp(3.25rem, 6vw, 6.4rem);
  
    font-weight: 400;
  
    line-height: .98;
  
    letter-spacing: -.035em;
  
    text-wrap: balance;
  }
  
  
  /* =========================================================
     07 — LEAD
  ========================================================= */
  
  .news-article__lead {
    max-width: 720px;
  
    margin: 0;
  
    color: #444;
  
    font-size:
      clamp(1.06rem, 1.6vw, 1.32rem);
  
    line-height: 1.7;
  }
  
  
  .news-article__lead strong {
    color: var(--charcoal);
    font-weight: 600;
  }
  
  
  /* =========================================================
     08 — ARTICLE META
  ========================================================= */
  
  .news-article__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  
    gap: 10px;
  
    margin-top: 34px;
  
    padding-top: 22px;
  
    border-top:
      1px solid var(--warm-gray);
  
    color: var(--muted);
  
    font-size: .73rem;
    font-weight: 600;
  
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  
  
  /* =========================================================
     09 — FEATURED IMAGE
  ========================================================= */
  
  .news-article__hero-image {
    position: relative;
  
    min-height: 520px;
  
    margin: 0;
  
    overflow: hidden;
  
    background: var(--stone);
  }
  
  
  .news-article__hero-image::after {
    content: "";
  
    position: absolute;
    inset: 0;
  
    background:
      linear-gradient(
        180deg,
        rgba(31, 31, 31, .02),
        rgba(31, 31, 31, .18)
      );
  
    pointer-events: none;
  }
  
  
  .news-article__hero-image img {
    display: block;
  
    width: 100%;
    height: 100%;
  
    min-height: 520px;
  
    object-fit: cover;
    object-position: center;
  
    filter:
      grayscale(.18)
      contrast(1.03);
  
    transition:
      transform 900ms
      cubic-bezier(.22, .72, .28, 1);
  }
  
  
  /*
     Very subtle movement.
  */
  
  .news-article__hero:hover
  .news-article__hero-image img {
    transform: scale(1.025);
  }
  
  
  /* Terracotta corner detail */
  
  .news-article__hero-image::before {
    content: "";
  
    position: absolute;
  
    z-index: 2;
  
    width: 85px;
    height: 85px;
  
    left: 0;
    bottom: 0;
  
    border-left:
      2px solid var(--terracotta);
  
    border-bottom:
      2px solid var(--terracotta);
  
    pointer-events: none;
  }
  
  
  /* =========================================================
     10 — ARTICLE BODY LAYOUT
  ========================================================= */
  
  .news-article__layout {
    display: grid;
  
    grid-template-columns:
      minmax(0, 1fr)
      minmax(260px, 330px);
  
    gap:
      clamp(58px, 8vw, 110px);
  
    align-items: start;
  
    padding-top:
      clamp(76px, 9vw, 128px);
  
    padding-bottom:
      clamp(90px, 10vw, 145px);
  }
  
  
  /* =========================================================
     11 — ARTICLE BODY
  ========================================================= */
  
  .news-article__body {
    min-width: 0;
  
    max-width: 820px;
  }
  
  
  /* Individual article sections */
  
  .news-article__body > section {
    margin-bottom:
      clamp(74px, 8vw, 112px);
  }
  
  
  .news-article__body > section:last-of-type {
    margin-bottom: 0;
  }
  
  
  /* =========================================================
     12 — ARTICLE TYPOGRAPHY
  ========================================================= */
  
  .news-article__body h2 {
    max-width: 720px;
  
    margin:
      10px
      0
      28px;
  
    font-family: var(--font-display);
  
    font-size:
      clamp(2.6rem, 4vw, 4.4rem);
  
    font-weight: 400;
  
    line-height: 1.03;
  
    letter-spacing: -.025em;
  }
  
  
  .news-article__body h3 {
    margin:
      0
      0
      10px;
  
    font-size:
      clamp(1.05rem, 1.5vw, 1.3rem);
  
    font-weight: 600;
  
    line-height: 1.3;
  }
  
  
  .news-article__body p {
    margin:
      0
      0
      22px;
  
    color: #484848;
  
    font-size: 1rem;
  
    line-height: 1.82;
  }
  
  
  .news-article__body p:last-child {
    margin-bottom: 0;
  }
  
  
  .news-article__body strong {
    color: var(--charcoal);
  }
  
  
  /* Opening paragraph */
  
  .news-article__opening {
    color: var(--charcoal) !important;
  
    font-family: var(--font-display);
  
    font-size:
      clamp(1.5rem, 2.2vw, 2rem) !important;
  
    line-height: 1.46 !important;
  
    letter-spacing: -.01em;
  }
  
  
  /* =========================================================
     13 — REGISTRATION FEES
  ========================================================= */
  
  .news-article__fees {
    display: grid;
  
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  
    gap: 18px;
  
    margin-top: 38px;
  }
  
  
  .news-article__fee-card {
    position: relative;
    overflow: hidden;
  
    min-height: 260px;
  
    padding: 30px;
  
    background: var(--charcoal);
  
    color: var(--ivory);
  }
  
  
  .news-article__fee-card::before {
    content: "";
  
    position: absolute;
  
    width: 220px;
    height: 130px;
  
    right: -60px;
    top: -45px;
  
    border:
      1px solid rgba(184, 92, 61, .55);
  
    border-radius: 50%;
  
    transform:
      rotate(-12deg);
  }
  
  
  .news-article__fee-label {
    position: relative;
    z-index: 2;
  
    display: block;
  
    margin-bottom: 38px;
  
    color: rgba(246, 242, 235, .7);
  
    font-size: .68rem;
    font-weight: 700;
  
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  
  
  .news-article__fee-prices {
    position: relative;
    z-index: 2;
  
    display: grid;
  
    grid-template-columns:
      repeat(2, 1fr);
  
    gap: 24px;
  }
  
  
  .news-article__fee-prices > div {
    display: flex;
    flex-direction: column;
  
    gap: 6px;
  }
  
  
  .news-article__fee-prices > div + div {
    padding-left: 24px;
  
    border-left:
      1px solid rgba(255,255,255,.18);
  }
  
  
  .news-article__fee-prices span {
    color:
      rgba(246, 242, 235, .62);
  
    font-size: .62rem;
    font-weight: 700;
  
    letter-spacing: .1em;
  }
  
  
  .news-article__fee-prices strong {
    color: var(--ivory);
  
    font-family: var(--font-display);
  
    font-size:
      clamp(3rem, 5vw, 4.5rem);
  
    font-weight: 400;
  
    line-height: 1;
  }
  
  
  .news-article__fee-prices small {
    color:
      rgba(246, 242, 235, .6);
  
    font-size: .7rem;
  }
  
  
  /* =========================================================
     14 — IMPORTANT DATES
  ========================================================= */
  
  .news-article__dates {
    margin-top: 38px;
  
    border-top:
      1px solid var(--warm-gray);
  }
  
  
  .news-article__dates > div {
    display: grid;
  
    grid-template-columns:
      110px
      minmax(0, 1fr)
      auto;
  
    gap: 24px;
  
    align-items: center;
  
    padding:
      24px
      0;
  
    border-bottom:
      1px solid var(--warm-gray);
  }
  
  
  .news-article__dates span {
    color: var(--terracotta);
  
    font-family: var(--font-display);
  
    font-size: 1.65rem;
  
    line-height: 1;
  }
  
  
  .news-article__dates strong {
    font-size: .98rem;
    font-weight: 600;
  }
  
  
  .news-article__dates small {
    color: var(--muted);
  
    font-size: .72rem;
  
    text-align: right;
  }
  
  
  /* =========================================================
     15 — REGISTRATION STEPS
  ========================================================= */
  
  .news-article__steps {
    margin-top: 42px;
  
    border-top:
      1px solid var(--warm-gray);
  }
  
  
  .news-article__steps article {
    display: grid;
  
    grid-template-columns:
      82px
      minmax(0, 1fr);
  
    gap: 28px;
  
    padding:
      32px
      0;
  
    border-bottom:
      1px solid var(--warm-gray);
  }
  
  
  .news-article__steps article > span {
    color: var(--terracotta);
  
    font-family: var(--font-display);
  
    font-size: 2.25rem;
  
    line-height: 1;
  }
  
  
  .news-article__steps p {
    max-width: 610px;
  
    margin-bottom: 0;
  }
  
  
  /* =========================================================
     16 — IMPORTANT NOTE
  ========================================================= */
  
  .news-article__note {
    position: relative;
  
    margin-top:
      clamp(72px, 8vw, 110px);
  
    padding:
      38px
      42px
      38px
      48px;
  
    background: var(--stone);
  
    border-left:
      3px solid var(--terracotta);
  }
  
  
  .news-article__note strong {
    display: block;
  
    margin-bottom: 12px;
  
    font-family: var(--font-display);
  
    font-size:
      clamp(1.5rem, 2vw, 1.9rem);
  
    font-weight: 400;
  }
  
  
  .news-article__note p {
    max-width: 660px;
  
    margin-bottom: 22px;
  
    font-size: .94rem;
  }
  
  
  .news-article__note a {
    display: inline-flex;
  
    color: var(--charcoal);
  
    font-size: .68rem;
    font-weight: 700;
  
    letter-spacing: .09em;
    text-decoration: none;
  
    transition:
      color 180ms ease;
  }
  
  
  .news-article__note a:hover,
  .news-article__note a:focus-visible {
    color: var(--terracotta);
  }
  
  
  /* =========================================================
     17 — ARTICLE SIDEBAR
  ========================================================= */
  
  .news-article__sidebar {
    min-width: 0;
  }
  
  
  .news-article__sidebar-card {
    position: sticky;
  
    top: 110px;
  
    padding:
      30px;
  
    background: #fff;
  
    border:
      1px solid var(--warm-gray);
  }
  
  
  /* Data list */
  
  .news-article__sidebar-card dl {
    margin:
      26px
      0
      30px;
  }
  
  
  .news-article__sidebar-card dl > div {
    padding:
      17px
      0;
  
    border-bottom:
      1px solid var(--warm-gray);
  }
  
  
  .news-article__sidebar-card dl > div:first-child {
    border-top:
      1px solid var(--warm-gray);
  }
  
  
  .news-article__sidebar-card dt {
    margin-bottom: 6px;
  
    color: var(--muted);
  
    font-size: .62rem;
    font-weight: 700;
  
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  
  
  .news-article__sidebar-card dd {
    margin: 0;
  
    color: var(--charcoal);
  
    font-size: .9rem;
    font-weight: 600;
  
    line-height: 1.45;
  }
  
  
  .news-article__sidebar-card .btn {
    width: 100%;
  
    justify-content: center;
  }
  
  
  /* =========================================================
     18 — FINAL CTA
  ========================================================= */
  
  .news-article__cta {
    position: relative;
  
    overflow: hidden;
  
    padding:
      clamp(72px, 8vw, 110px)
      0;
  
    background: var(--charcoal);
  
    color: var(--ivory);
  }
  
  
  .news-article__cta::before {
    content: "";
  
    position: absolute;
  
    width: 780px;
    height: 250px;
  
    right: -140px;
    bottom: -130px;
  
    border-top:
      1px solid rgba(184, 92, 61, .62);
  
    border-radius: 50%;
  
    transform:
      rotate(-5deg);
  }
  
  
  .news-article__cta-inner {
    position: relative;
    z-index: 2;
  
    display: grid;
  
    grid-template-columns:
      minmax(0, 1fr)
      auto;
  
    gap: 60px;
  
    align-items: end;
  }
  
  
  .news-article__cta h2 {
    max-width: 760px;
  
    margin:
      10px
      0
      14px;
  
    color: var(--ivory);
  
    font-family: var(--font-display);
  
    font-size:
      clamp(2.8rem, 5vw, 5rem);
  
    font-weight: 400;
  
    line-height: 1;
  
    letter-spacing: -.025em;
  }
  
  
  .news-article__cta p {
    margin: 0;
  
    color:
      rgba(246, 242, 235, .7);
  
    font-size: .9rem;
  }
  
  
  /* =========================================================
     19 — LINKS INSIDE ARTICLE TEXT
  ========================================================= */
  
  .news-article__body
  section > p a {
    color: var(--terracotta);
  
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  
  
  /* =========================================================
     20 — FOCUS STATES
  ========================================================= */
  
  .news-article a:focus-visible {
    outline:
      2px solid var(--terracotta);
  
    outline-offset: 4px;
  }
  
  
  /* =========================================================
     21 — TABLET
  ========================================================= */
  
  @media (max-width: 1050px) {
  
    .news-article__hero-grid {
      grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, .75fr);
  
      gap: 42px;
    }
  
  
    .news-article__hero-image,
    .news-article__hero-image img {
      min-height: 440px;
    }
  
  
    .news-article__layout {
      grid-template-columns:
        minmax(0, 1fr)
        260px;
  
      gap: 56px;
    }
  
  
    .news-article__fees {
      grid-template-columns: 1fr;
    }
  
  }
  
  
  /* =========================================================
     22 — SMALL TABLET / MOBILE
  ========================================================= */
  
  @media (max-width: 780px) {
  
    .news-article__hero {
      padding:
        125px
        0
        64px;
    }
  
  
    .news-article__hero-grid {
      grid-template-columns: 1fr;
    }
  
  
    .news-article__intro h1 {
      font-size:
        clamp(3rem, 12vw, 5rem);
    }
  
  
    .news-article__hero-image {
      min-height: 380px;
    }
  
  
    .news-article__hero-image img {
      min-height: 380px;
    }
  
  
    .news-article__layout {
      grid-template-columns: 1fr;
  
      padding-top: 72px;
    }
  
  
    .news-article__body {
      max-width: none;
    }
  
  
    .news-article__sidebar {
      order: -1;
    }
  
  
    .news-article__sidebar-card {
      position: relative;
      top: auto;
    }
  
  
    .news-article__dates > div {
      grid-template-columns:
        90px
        minmax(0, 1fr);
    }
  
  
    .news-article__dates small {
      grid-column: 2;
  
      text-align: left;
    }
  
  
    .news-article__cta-inner {
      grid-template-columns: 1fr;
  
      align-items: start;
  
      gap: 32px;
    }
  
  
    .news-article__cta-inner .btn {
      justify-self: start;
    }
  
  }
  
  
  /* =========================================================
     23 — MOBILE
  ========================================================= */
  
  @media (max-width: 560px) {
  
    .news-article__breadcrumb {
      margin-bottom: 28px;
    }
  
  
    .news-article__lead {
      font-size: 1rem;
    }
  
  
    .news-article__hero-image,
    .news-article__hero-image img {
      min-height: 320px;
    }
  
  
    .news-article__body > section {
      margin-bottom: 68px;
    }
  
  
    .news-article__fees {
      gap: 14px;
    }
  
  
    .news-article__fee-card {
      min-height: 0;
  
      padding: 26px 22px;
    }
  
  
    .news-article__fee-prices {
      gap: 18px;
    }
  
  
    .news-article__fee-prices > div + div {
      padding-left: 18px;
    }
  
  
    .news-article__fee-prices strong {
      font-size: 3rem;
    }
  
  
    .news-article__dates > div {
      grid-template-columns: 76px 1fr;
  
      gap: 18px;
  
      padding:
        20px
        0;
    }
  
  
    .news-article__dates span {
      font-size: 1.35rem;
    }
  
  
    .news-article__steps article {
      grid-template-columns: 56px 1fr;
  
      gap: 18px;
  
      padding:
        26px
        0;
    }
  
  
    .news-article__steps article > span {
      font-size: 1.8rem;
    }
  
  
    .news-article__note {
      padding:
        30px
        24px;
    }
  
  
    .news-article__sidebar-card {
      padding:
        26px
        22px;
    }
  
  
    .news-article__cta {
      padding:
        68px
        0;
    }
  
  }
  
  
  /* =========================================================
     24 — REDUCED MOTION
  ========================================================= */
  
  @media (prefers-reduced-motion: reduce) {
  
    .news-article__hero-image img {
      transition: none;
    }
  
  
    .news-article__hero:hover
    .news-article__hero-image img {
      transform: none;
    }
  
  }