/* ==========================================================================
   Mediji (in-the-media) page
   ========================================================================== */
.media-hero{
  background:url('../../images/backgrounds/mosaic-pattern.png') repeat;
  text-align:center;
  padding:110px 20px 118px;
}
.media-hero h1{font-size:46px;font-weight:700;color:var(--heading);margin-bottom:22px}
.media-hero p{font-size:17px;color:var(--body);margin-bottom:26px}

.media-section{background:var(--white);padding:56px 0 80px}
.media-tabs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.media-tabs button{
  font-size:14px;font-weight:500;color:var(--heading);
  background:var(--white);border:1px solid #E4E6EA;border-radius:6px;
  padding:12px 22px;
  transition:background-color .3s,color .3s,border-color .3s;
}
.media-tabs button.is-active{background:var(--green);border-color:var(--green);color:var(--white)}
.media-pane{display:none}
.media-pane.is-active{display:block}

.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.media-card{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;gap:16px;
  min-height:480px;
  border:1px solid #E8EAEC;border-radius:8px;
  padding:24px;
  background-position:center top;background-size:cover;background-repeat:no-repeat;
  overflow:hidden;
}
.media-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,35,55,0) 0%,#112337 70%);
}
.media-card > *{position:relative}
.media-card__person{display:flex;align-items:center;gap:15px}
.media-card__person img{width:23%;max-width:64px;border-radius:200px}
.media-card__person h3{font-size:20px;line-height:22px;font-weight:400;color:var(--white)}
.media-card__person p{font-size:16px;line-height:20px;color:#D1D5D9;margin:4px 0 0}
.media-card__title{font-size:20px;line-height:26px;font-weight:600;color:var(--white)}
.media-card__link{
  display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:10px;
  width:100%;
  font-family:var(--font-accent);font-size:16px;font-weight:500;color:var(--white);
  background:rgba(255,255,255,.06);border-radius:6px;
  padding:11px 10px;
  transition:background-color .3s;
}
.media-card__link:hover{background:var(--green)}
.media-card__link svg{width:14px;height:14px;fill:currentColor}
.media-more{display:flex;justify-content:center;margin-top:44px}
.media-more .btn{font-size:14px;padding:14px 36px}

@media (max-width:1024px){
  .media-grid{grid-template-columns:repeat(2,1fr)}
  .media-hero{padding:70px 20px 80px}
}
@media (max-width:767px){
  .media-hero h1{font-size:30px}
  .media-grid{grid-template-columns:1fr}
  .media-section{padding:40px 0 56px}
}