/* =========================================================
   ALL CATALOGUES PAGE
========================================================= */

.catalogue-list-page{
  background:#f4f4f4;
  overflow:hidden;
}

.catalogue-list-container{
  width:min(1180px, calc(100% - 88px));
  margin:0 auto;
}


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

.catalogue-list-hero{
  position:relative;

  min-height:330px;

  display:flex;
  align-items:center;

  overflow:hidden;

  background:#101827;
  color:#fff;
}

.catalogue-list-hero-bg{
  position:absolute;
  inset:0;

  background-size:cover;
  background-position:center;

  transform:scale(1.03);

  filter:saturate(.9);
}

.catalogue-list-hero-bg-empty{
  background:
    radial-gradient(
      circle at 75% 35%,
      rgba(217, 0, 6, .32),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #101827,
      #242c3b
    );
}

.catalogue-list-hero-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, .88) 0%,
      rgba(0, 0, 0, .65) 48%,
      rgba(0, 0, 0, .42) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .14) 0%,
      rgba(0, 0, 0, .76) 100%
    );
}

.catalogue-list-hero .catalogue-list-container{
  position:relative;
  z-index:2;

  padding:78px 0;
}

.catalogue-list-hero h1{
  max-width:900px;

  margin:0 0 16px;

  color:#fff;

  font-size:62px;
  line-height:.88;
  font-weight:900;
  font-style:italic;

  text-transform:uppercase;
  letter-spacing:-2px;
}

.catalogue-list-hero p{
  max-width:720px;

  margin:0;

  color:#fff;

  font-size:22px;
  line-height:1.35;
  font-weight:500;
}


/* =========================================================
   CATALOGUE LIST SECTION
========================================================= */

.catalogue-list-section{
  padding:72px 0 96px;
  background:#f4f4f4;
}

.catalogue-list-grid{
  display:grid;

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

  gap:46px 26px;
}


/* =========================================================
   CATALOGUE CARD
========================================================= */

.catalogue-list-card{
  min-width:0;

  display:flex;
  flex-direction:column;
}

.catalogue-list-image{
  position:relative;

  width:100%;
  aspect-ratio:7 / 10;

  display:block;

  overflow:hidden;

  border-radius:7px;

  background:#e5e7eb;

  box-shadow:
    0 18px 42px
    rgba(16, 24, 39, .14);
}

.catalogue-list-image::after{
  content:"";

  position:absolute;
  inset:0;

  border:1px solid
    rgba(255, 255, 255, .18);

  border-radius:inherit;

  pointer-events:none;
}

.catalogue-list-image img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transition:
    transform .35s ease,
    filter .35s ease;
}

.catalogue-list-card:hover
.catalogue-list-image img{
  transform:scale(1.045);
  filter:saturate(1.05);
}

.catalogue-list-image-empty{
  width:100%;
  height:100%;

  display:grid;
  place-items:center;

  padding:24px;

  background:
    linear-gradient(
      145deg,
      #202736,
      #101827
    );

  color:rgba(255, 255, 255, .72);

  font-size:13px;
  font-weight:900;
  text-align:center;
  text-transform:uppercase;
}

.catalogue-list-body{
  flex:1;

  display:flex;
  flex-direction:column;

  padding-top:18px;
}

.catalogue-list-body h2{
  margin:0 0 12px;

  color:#101827;

  font-size:21px;
  line-height:1.08;
  font-weight:900;

  letter-spacing:-.4px;
}

.catalogue-list-body h2 a{
  color:inherit;

  transition:color .2s ease;
}

.catalogue-list-body h2 a:hover{
  color:var(--red);
}

.catalogue-list-body p{
  margin:0 0 18px;

  color:#646b77;

  font-size:14px;
  line-height:1.55;
  font-weight:500;
}

.catalogue-list-link{
  width:max-content;

  display:inline-flex;
  align-items:center;
  gap:8px;

  margin-top:auto;

  color:var(--red);

  font-size:12px;
  line-height:1;
  font-weight:900;

  text-transform:uppercase;

  transition:
    color .2s ease,
    gap .2s ease;
}

.catalogue-list-link span{
  font-size:16px;
  line-height:1;
}

.catalogue-list-link:hover{
  gap:12px;
  color:#101827;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.catalogue-list-empty{
  padding:54px 30px;

  border:1px dashed #cfd3da;
  border-radius:8px;

  background:#fff;

  text-align:center;
}

.catalogue-list-empty h2{
  margin:0 0 10px;

  color:#101827;

  font-size:28px;
  line-height:1;
  font-weight:900;
  font-style:italic;

  text-transform:uppercase;
}

.catalogue-list-empty p{
  margin:0;

  color:#6b7280;

  font-size:15px;
  line-height:1.5;
}


/* =========================================================
   PAGINATION
========================================================= */

.catalogue-list-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;

  gap:10px;

  margin-top:64px;
}

.catalogue-list-pagination button{
  min-width:42px;
  height:42px;

  padding:0 14px;

  border:1px solid #d4d7dd;
  border-radius:4px;

  background:#fff;
  color:#101827;

  font-family:inherit;
  font-size:12px;
  line-height:1;
  font-weight:900;

  text-transform:uppercase;

  cursor:pointer;

  transition:
    border-color .2s ease,
    background .2s ease,
    color .2s ease;
}

.catalogue-list-pagination button:hover,
.catalogue-list-pagination button.active{
  border-color:var(--red);
  background:var(--red);
  color:#fff;
}

.catalogue-list-pagination button:disabled{
  opacity:.38;
  cursor:not-allowed;
}

.catalogue-list-pagination button:disabled:hover{
  border-color:#d4d7dd;
  background:#fff;
  color:#101827;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1200px){

  .catalogue-list-container{
    width:calc(100% - 64px);
  }

  .catalogue-list-hero{
    min-height:310px;
  }

  .catalogue-list-hero h1{
    font-size:54px;
    letter-spacing:-1.6px;
  }

  .catalogue-list-hero p{
    font-size:20px;
  }

  .catalogue-list-section{
    padding:62px 0 86px;
  }

  .catalogue-list-grid{
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap:40px 20px;
  }

  .catalogue-list-body h2{
    font-size:18px;
  }
}


/* =========================================================
   SMALL TABLET
========================================================= */

@media(max-width:900px){

  .catalogue-list-grid{
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:38px 24px;
  }

  .catalogue-list-image{
    aspect-ratio:7 / 9;
  }

  .catalogue-list-body h2{
    font-size:20px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  .catalogue-list-container{
    width:calc(100% - 32px);
  }

  .catalogue-list-hero{
    min-height:270px;
  }

  .catalogue-list-hero .catalogue-list-container{
    padding:62px 0;
    width:calc(100% - 24px);
  }

  .catalogue-list-hero h1{
    font-size:40px;
    line-height:.9;

    letter-spacing:-1.1px;
  }

  .catalogue-list-hero p{
    max-width:330px;

    font-size:16px;
    line-height:1.45;
  }

  .catalogue-list-section{
    padding:46px 0 72px;
  }

  .catalogue-list-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px 12px;
  }

  .catalogue-list-image{
    aspect-ratio:7 / 10;
    border-radius:6px;
  }

  .catalogue-list-body{
    padding-top:13px;
  }

  .catalogue-list-body h2{
    margin:0 0 7px;
    font-size:14px;
    line-height:1.15;
  }

  .catalogue-list-body p{
    margin:0 0 9px;
    font-size:11px;
    line-height:1.35;
    
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  .catalogue-list-link{
    gap:4px;
    font-size:9px;
    line-height:1.2;
  }

  .catalogue-list-link span{
    font-size:10px;
  }

  .catalogue-list-pagination{
    gap:8px;
    margin-top:48px;
  }

  .catalogue-list-pagination button{
    min-width:38px;
    height:38px;

    padding:0 12px;

    font-size:11px;
  }

  .catalogue-list-empty{
    padding:42px 20px;
  }

  .catalogue-list-empty h2{
    font-size:23px;
  }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:420px){

  .catalogue-list-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px 10px;
  }

  .catalogue-list-image{
    width:min(100%, 320px);
    margin:0 auto;
  }

  .catalogue-list-body{
    width:min(100%, 320px);
    margin:0 auto;
    padding:10px 8px 12px;
  }

  .catalogue-list-body h2{
    font-size:14px;
  }

  .catalogue-list-body p{
    font-size:11px;
  }

  .catalogue-list-link{
    font-size:9px;
  }
}