/* ==========================================================================
   media.css — page-specific styles for media.html ONLY.
   Reuses variables, typography, header, footer, dropdown/accordion,
   .disclaimer, .service-link classes already defined in the shared style.css.
   Nothing in style.css is modified here.
   ========================================================================== */


/* ---------- Media intro ---------- */
.media-intro{padding:100px 0 70px}
.media-intro .section-sub{max-width:620px;margin-left:auto;margin-right:auto}

/* ---------- Press grid ---------- */
.press-grid-section{padding:0 0 100px}
.press-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
}

.press-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.press-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}

.press-thumb{
  display:block;position:relative;aspect-ratio:16/9;overflow:hidden;
}
.press-thumb svg{
  width:100%;height:100%;display:block;
  transition:transform .6s var(--ease);
}
.press-card:hover .press-thumb svg{transform:scale(1.08)}

.press-body{padding:24px 24px 28px}
.press-body h3{font-size:17px;line-height:1.45;margin-bottom:10px}
.press-body h3 a{color:var(--navy);transition:color .3s var(--ease)}
.press-body h3 a:hover{color:var(--gold-dark)}
.press-source{font-size:12.5px;color:var(--grey-light);letter-spacing:.4px;text-transform:uppercase;margin-bottom:16px}

/* ---------- Responsive ---------- */
@media (max-width:1040px){
  .press-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:860px){

}

@media (max-width:640px){

  .media-intro{padding:70px 0 50px}
  .press-grid-section{padding:0 0 70px}
  .press-grid{grid-template-columns:1fr;gap:24px}
}