/* =========================================================
   ENOFLIX MEDIA CENTRE — PUBLIC DARK DESIGN SYSTEM
   ========================================================= */

:root{
  --media-public-bg:#05080d;
  --media-public-bg-soft:#080d14;

  --media-public-card:#0d141e;
  --media-public-card-2:#101a27;

  --media-public-text:#f5f8fc;
  --media-public-soft:#c1cad6;
  --media-public-muted:#7f8b9b;

  --media-public-blue:#2c95ff;
  --media-public-cyan:#4cddff;
  --media-public-violet:#766cff;

  --media-public-line:rgba(255,255,255,.09);

  --media-public-shell:1260px;

  --media-public-radius:22px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  color:
    var(--media-public-text);

  background:
    radial-gradient(
      circle at 85% -5%,
      rgba(44,149,255,.15),
      transparent 29%
    ),
    var(--media-public-bg);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

a{
  color:inherit;
}

img{
  display:block;

  max-width:100%;
}

button,
input,
audio{
  font:inherit;
}

.media-public-shell{
  width:
    min(
      calc(100% - 40px),
      var(--media-public-shell)
    );

  margin:auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.media-public-header{
  position:sticky;

  z-index:50;

  top:0;

  border-bottom:
    1px solid
    var(--media-public-line);

  backdrop-filter:
    blur(20px);

  background:
    rgba(5,8,13,.84);
}

.media-public-nav{
  display:flex;
  align-items:center;

  min-height:74px;

  gap:24px;
}

.media-public-brand{
  display:flex;
  align-items:center;

  gap:10px;

  flex:0 0 auto;

  color:#fff;

  text-decoration:none;

  font-size:19px;
  font-weight:900;

  letter-spacing:-.025em;
}

.media-public-brand-mark{
  display:flex;

  gap:3px;

  align-items:flex-end;

  height:26px;
}

.media-public-brand-mark span{
  display:block;

  width:4px;

  border-radius:99px;

  background:
    linear-gradient(
      180deg,
      var(--media-public-cyan),
      var(--media-public-blue)
    );
}

.media-public-brand-mark span:nth-child(1){
  height:12px;
}

.media-public-brand-mark span:nth-child(2){
  height:24px;
}

.media-public-brand-mark span:nth-child(3){
  height:17px;
}

.media-public-brand-mark span:nth-child(4){
  height:8px;
}

.media-public-nav-links{
  display:flex;
  align-items:center;

  gap:19px;

  margin-left:auto;
}

.media-public-nav-links a{
  color:#9eaaba;

  text-decoration:none;

  font-size:12px;
  font-weight:650;
}

.media-public-nav-links a:hover{
  color:
    var(--media-public-cyan);
}


/* =========================================================
   PAGE HERO
   ========================================================= */

.media-public-page-hero{
  padding:
    88px 0 54px;
}

.media-public-kicker{
  color:
    var(--media-public-cyan);

  font-size:10px;
  font-weight:900;

  letter-spacing:.18em;

  text-transform:uppercase;
}

.media-public-page-hero h1{
  max-width:1050px;

  margin:
    8px 0 16px;

  font-size:
    clamp(
      44px,
      8vw,
      92px
    );

  line-height:.93;

  letter-spacing:-.065em;
}

.media-public-page-hero p{
  max-width:700px;

  margin:0;

  color:
    var(--media-public-muted);

  font-size:17px;
  line-height:1.7;
}


/* =========================================================
   CINEMATIC HERO STORY
   ========================================================= */

.media-public-feature{
  position:relative;

  isolation:isolate;

  overflow:hidden;

  min-height:570px;

  margin-bottom:75px;

  border:
    1px solid
    var(--media-public-line);

  border-radius:29px;

  background:
    #0b1119;
}

.media-public-feature>img{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  opacity:.60;
}

.media-public-feature::before{
  content:"";

  position:absolute;

  z-index:1;

  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(3,6,10,.98) 0%,
      rgba(3,6,10,.77) 43%,
      rgba(3,6,10,.18) 79%
    ),
    linear-gradient(
      0deg,
      rgba(3,6,10,.92),
      transparent 60%
    );
}

.media-public-feature__content{
  position:relative;

  z-index:2;

  display:flex;

  min-height:570px;

  max-width:760px;

  flex-direction:column;

  justify-content:flex-end;

  padding:50px;
}

.media-public-feature h2{
  margin:
    8px 0 15px;

  font-size:
    clamp(
      40px,
      6vw,
      72px
    );

  line-height:.96;

  letter-spacing:-.055em;
}

.media-public-feature p{
  max-width:650px;

  margin:0;

  color:#bdc7d4;

  font-size:17px;
  line-height:1.68;
}


/* =========================================================
   BUTTON
   ========================================================= */

.media-public-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:max-content;

  min-height:44px;

  margin-top:20px;

  padding:
    0 18px;

  color:#03101a;

  border-radius:10px;

  background:
    linear-gradient(
      135deg,
      var(--media-public-cyan),
      var(--media-public-blue)
    );

  text-decoration:none;

  font-size:12px;
  font-weight:900;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.media-public-section{
  margin-bottom:76px;
}

.media-public-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:20px;
}

.media-public-section-head h2{
  margin:0;

  font-size:30px;

  letter-spacing:-.04em;
}

.media-public-section-head a{
  color:
    var(--media-public-cyan);

  text-decoration:none;

  font-size:12px;
  font-weight:800;
}


/* =========================================================
   GRID
   ========================================================= */

.media-public-grid{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:18px;
}

.media-public-card{
  overflow:hidden;

  min-width:0;

  border:
    1px solid
    var(--media-public-line);

  border-radius:
    var(--media-public-radius);

  background:
    linear-gradient(
      180deg,
      var(--media-public-card-2),
      var(--media-public-card)
    );

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.media-public-card:hover{
  transform:
    translateY(-3px);

  border-color:
    rgba(76,221,255,.22);

  box-shadow:
    0 22px 55px
    rgba(0,0,0,.30);
}

.media-public-card-media{
  overflow:hidden;

  aspect-ratio:
    16 / 9;

  background:#131c27;
}

.media-public-card-media img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .45s ease;
}

.media-public-card:hover
.media-public-card-media img{
  transform:
    scale(1.05);
}

.media-public-card-content{
  padding:19px;
}

.media-public-card-content small{
  display:block;

  margin-bottom:8px;

  color:
    var(--media-public-cyan);

  font-size:9px;
  font-weight:900;

  letter-spacing:.12em;

  text-transform:uppercase;
}

.media-public-card h3{
  margin:
    0 0 9px;

  font-size:19px;

  line-height:1.28;
}

.media-public-card h3 a{
  text-decoration:none;
}

.media-public-card p{
  display:-webkit-box;

  overflow:hidden;

  margin:0;

  color:
    var(--media-public-muted);

  line-height:1.6;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}


/* =========================================================
   ARTICLE
   ========================================================= */

.media-public-article{
  max-width:900px;

  margin:
    0 auto 100px;
}

.media-public-article-image{
  overflow:hidden;

  margin-bottom:32px;

  border:
    1px solid
    var(--media-public-line);

  border-radius:26px;
}

.media-public-article-image img{
  width:100%;

  max-height:590px;

  object-fit:cover;
}

.media-public-article h1{
  margin:
    8px 0 18px;

  font-size:
    clamp(
      40px,
      6vw,
      70px
    );

  line-height:.98;

  letter-spacing:-.055em;
}

.media-public-article-summary{
  color:#b8c3cf;

  font-size:19px;
  line-height:1.7;
}

.media-public-rich{
  margin-top:30px;

  color:#c9d1db;

  font-size:17px;
  line-height:1.82;
}

.media-public-rich h1,
.media-public-rich h2,
.media-public-rich h3,
.media-public-rich h4{
  color:#fff;
}

.media-public-audio{
  width:100%;

  margin:
    25px 0;
}


/* =========================================================
   EMPTY / ERROR
   ========================================================= */

.media-public-empty,
.media-public-feedback{
  margin-bottom:85px;

  padding:27px;

  color:
    var(--media-public-muted);

  border:
    1px solid
    var(--media-public-line);

  border-radius:17px;

  background:
    var(--media-public-card);

  text-align:center;
}

.media-public-feedback.is-error{
  color:#ff9999;

  border-color:
    rgba(255,100,100,.16);

  background:
    rgba(255,100,100,.05);
}


/* =========================================================
   FOOTER
   ========================================================= */

.media-public-footer{
  margin-top:70px;

  padding:
    38px 0;

  border-top:
    1px solid
    var(--media-public-line);
}

.media-public-footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  color:
    var(--media-public-muted);

  font-size:12px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:950px){

  .media-public-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .media-public-nav-links{
    display:none;
  }

}


@media(max-width:600px){

  .media-public-shell{
    width:
      min(
        calc(100% - 26px),
        var(--media-public-shell)
      );
  }

  .media-public-page-hero{
    padding:
      58px 0 37px;
  }

  .media-public-grid{
    grid-template-columns:
      1fr;
  }

  .media-public-feature,
  .media-public-feature__content{
    min-height:440px;
  }

  .media-public-feature__content{
    padding:28px;
  }

  .media-public-footer-inner{
    align-items:flex-start;

    flex-direction:column;
  }

}