/* =========================================================
   COMBOS DOS LIVROS
   Arquivo: combo.css
   ========================================================= */

.combo-section {
  padding-top: 35px;
  padding-bottom: 95px;
}

/* Cabeçalho da seção */
.combo-section .section-heading {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 50px;
  align-items: end;
  margin-bottom: 38px;
}

.combo-section .section-heading h2 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.2vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: .25em 0 0;
}

.combo-section .section-heading > p {
  color: var(--muted);
  margin-bottom: 9px;
}

/* Grid principal */
.combo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Cards dos combos */
.combo-card {
  min-height: 420px;
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  overflow: hidden;

  border-radius: 30px;

  background: rgba(255, 255, 255, .66);

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

  box-shadow:
    0 18px 45px rgba(62, 47, 30, .09);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.combo-card:hover {
  transform: translateY(-6px);

  box-shadow:
    0 26px 55px rgba(62, 47, 30, .13);
}

/* Área visual */
.combo-art {
  position: relative;
  min-height: 100%;

  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(246, 201, 85, .58),
      transparent 28%
    ),
    radial-gradient(
      circle at 73% 70%,
      rgba(127, 182, 199, .44),
      transparent 31%
    ),
    #f1e9dc;
}

.combo-three .combo-art {
  background:
    radial-gradient(
      circle at 25% 25%,
      rgba(246, 201, 85, .55),
      transparent 28%
    ),
    radial-gradient(
      circle at 72% 33%,
      rgba(127, 182, 199, .45),
      transparent 28%
    ),
    radial-gradient(
      circle at 55% 78%,
      rgba(223, 127, 110, .43),
      transparent 29%
    ),
    #f1e9dc;
}

/* Miniaturas estilizadas dos livros */
.combo-mini-book {
  position: absolute;

  width: 112px;
  height: 165px;

  border-radius:
    8px 16px 16px 8px;

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

  box-shadow:
    0 18px 30px rgba(42, 35, 25, .18);

  display: grid;
  place-items: center;

  font-family: var(--serif);
  font-size: 2.3rem;
  font-weight: 700;

  color:
    rgba(35, 48, 42, .75);
}

/* Livro Aurelina */
.book-aurelina {
  left: 18%;
  top: 22%;

  background: #f3cb63;

  transform:
    rotate(-9deg);
}

/* Livro Resplendor */
.book-resplendor {
  left: 47%;
  top: 30%;

  background: #9bc7d8;

  transform:
    rotate(7deg);
}

/* Livro Dona Cuidado */
.book-cuidado {
  left: 58%;
  top: 20%;

  background: #e5a092;

  transform:
    rotate(11deg);
}

/* Ajustes no combo de três livros */
.combo-art-three .book-aurelina {
  left: 7%;
  top: 22%;
}

.combo-art-three .book-resplendor {
  left: 35%;
  top: 29%;
}

.combo-art-three .book-cuidado {
  left: 61%;
  top: 19%;
}

/* Conteúdo textual */
.combo-copy {
  padding: 36px;

  display: flex;
  flex-direction: column;

  align-items: flex-start;
  justify-content: center;
}

.combo-label {
  font-size: .69rem;
  font-weight: 800;

  letter-spacing: .14em;

  color: #6b786f;
}

.combo-copy h3 {
  font-family: var(--serif);

  font-size:
    clamp(1.7rem, 3vw, 2.55rem);

  line-height: 1.08;

  margin:
    9px 0;
}

.combo-copy > p {
  color: var(--muted);

  font-size: .91rem;

  margin-bottom: 14px;
}

/* Lista de livros */
.combo-books-list {
  display: flex;
  flex-direction: column;

  gap: 6px;

  margin:
    8px 0 18px;

  color:
    var(--muted);

  font-size:
    .83rem;
}

.combo-books-list span {
  display: block;
}

/* Preço */
.combo-price {
  margin:
    6px 0 22px;
}

.combo-price small,
.combo-price strong,
.combo-price span {
  display: block;
}

.combo-price small {
  color:
    var(--muted);

  font-size:
    .72rem;

  text-transform:
    uppercase;

  letter-spacing:
    .08em;
}

.combo-price strong {
  font-family:
    var(--serif);

  font-size:
    2.25rem;

  line-height:
    1.1;

  margin-top:
    3px;
}

.combo-price span {
  color:
    var(--muted);

  font-size:
    .78rem;

  margin-top:
    5px;
}

/* Rodapé da section */
.combo-footer {
  max-width: 820px;

  margin:
    34px auto 0;

  display: flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  text-align:
    center;

  color:
    var(--muted);
}

.combo-footer p {
  margin: 0;

  font-size: .9rem;
}

/* Responsividade tablet */
@media (max-width: 980px) {

  .combo-section .section-heading {
    grid-template-columns: 1fr;

    gap:
      15px;
  }

  .combo-grid {
    grid-template-columns: 1fr;
  }

  .combo-card {
    grid-template-columns:
      .75fr 1.25fr;
  }

}

/* Responsividade smartphone */
@media (max-width: 680px) {

  .combo-section {
    padding-bottom:
      70px;
  }

  .combo-card {
    grid-template-columns:
      1fr;
  }

  .combo-art {
    min-height:
      260px;
  }

  .combo-mini-book {
    width:
      92px;

    height:
      137px;
  }

  .book-aurelina {
    left:
      22%;

    top:
      17%;
  }

  .book-resplendor {
    left:
      50%;

    top:
      25%;
  }

  .combo-art-three .book-aurelina {
    left:
      8%;
  }

  .combo-art-three .book-resplendor {
    left:
      36%;
  }

  .combo-art-three .book-cuidado {
    left:
      64%;
  }

  .combo-copy {
    padding:
      28px;
  }

  .combo-footer {
    align-items:
      flex-start;

    text-align:
      left;
  }

}