/* Typography */
html,
body,
*,
*::before,
*::after,
pre,
code,
kbd,
samp {
  font-family: "Instrument Serif", serif !important;
}

body {
  margin: 0;
  padding: 0;
  font-size: 2rem;
  line-height: 1.8rem;
  color: rgb(17, 24, 39);
}

p {
  font-size: 2rem;
  line-height: 2rem;
  margin-bottom: 2rem;
}

h1 {
  font-size: 6rem;
  line-height: 7rem;
  font-weight: 600;
}

h2 {
  font-size: 5rem;
  line-height: 6rem;
  font-weight: 600;
}

h3 {
  font-size: 4rem;
  line-height: 5rem;
  font-weight: 600;
}

/* Header */
header {
  padding: 1.5rem 0;
  background: linear-gradient(90deg, #4967ac 0%, #070d34 100%);
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header img {
  height: 32px;
}

@media (min-width: 768px) {
  header img {
    height: 135px;
  }
}

/* Hero Section */
.hero-section {
  margin-top: 0;
}

.hero-content {
  padding: 2rem 0;
}

.hero-title {
  font-size: 5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 6rem;
  }
}

.hero-text {
  text-align: justify;
  margin-bottom: 1.5rem;
}

.hero-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (min-width: 768px) {
  .hero-content {
    padding: 4rem 0;
  }

  .hero-section .row {
    display: flex;
    align-items: center;
  }
}

@media (max-width: 768px) {
  .hero-section .row {
    display: flex;
    flex-direction: column;
  }

  .hero-section .six.columns {
    width: 100%;
  }
}

/* Button */
.btn-primary {
  border: 2px solid rgb(17, 24, 39);
  background-color: transparent;
  color: rgb(17, 24, 39);
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 2.25rem;
  font-weight: 500;
}

.btn-primary:hover {
  background-color: rgb(17, 24, 39);
  color: white;
}

/* About Section */
.about-section {
  padding: 3rem 0;
}

@media (min-width: 768px) {
  .about-section {
    padding: 5rem 0;
  }
}

.about-section .row {
  display: flex;
  align-items: stretch;
}

.about-text {
  text-align: justify;
  padding: 2rem 0;
}

.about-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .about-section .row {
    flex-direction: column-reverse;
  }

  .about-section .six.columns {
    width: 100%;
  }

  .about-image {
    height: auto;
  }
}

/* Story Section */
.story-section {
  color: white;
  padding: 3rem 0;
}

@media (min-width: 768px) {
  .story-section {
    padding: 5rem 0;
  }
}

.story-section h2,
.story-section p {
  color: white;
}

.story-text {
  text-align: justify;
}

/* Genre Cards */
.genre-section {
  padding: 3rem 0;
}

@media (min-width: 768px) {
  .genre-section {
    padding: 5rem 0;
  }
}

.genre-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .genre-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.genre-card {
  position: relative;
  min-height: 520px;
  border-radius: 1rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  .genre-card {
    min-height: 768px;
  }
}

.genre-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.genre-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 3rem;
  color: white;
  overflow: hidden;
  box-sizing: border-box;
}

.genre-card h3 {
  color: white;
  margin-bottom: 1.5rem;
  font-size: 3rem;
  line-height: 3.5rem;
}

.genre-card p {
  color: white;
  text-align: justify;
  font-size: 1.75rem;
  line-height: 1.9rem;
  margin-bottom: 1rem;
}

/* Offers Section */
.offers-section {
  padding: 3rem 0;
  text-align: center;
}

@media (min-width: 768px) {
  .offers-section {
    padding: 4rem 0;
  }
}

/* Footer */
footer {
  background-color: rgb(210, 236, 248);
  padding: 3rem 0;
}

footer img {
  height: 24px;
}

@media (min-width: 768px) {
  footer img {
    height: 143px;
  }
}

/* Gradients */
.bg-gradient-1 {
  background-image: linear-gradient(
    rgb(233, 243, 243),
    rgb(210, 236, 248)
  );
}

.bg-gradient-2 {
  background-image: linear-gradient(rgb(210, 236, 248), rgb(5, 70, 145));
}

.bg-gradient-3 {
  background-image: linear-gradient(rgb(5, 70, 145), rgb(210, 236, 248));
}

.bg-gradient-4 {
  background-image: linear-gradient(
    rgb(210, 236, 248),
    rgb(233, 243, 243)
  );
}

/* Carousel */
.carousel-container {
  overflow: hidden;
}

.carousel-slider {
  display: flex;
  gap: 1rem;
  min-width: 266.667%;
  animation: slide 20s infinite linear;
}

.carousel-slide {
  flex: 0 0 auto;
  width: calc(100% / 6);
}

.carousel-slide img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 1rem;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  14.29% {
    transform: translateX(-8.333%);
  }
  28.57% {
    transform: translateX(-16.666%);
  }
  42.86% {
    transform: translateX(-25%);
  }
  57.14% {
    transform: translateX(-33.333%);
  }
  71.43% {
    transform: translateX(-41.666%);
  }
  85.71% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-58.333%);
  }
}

/* Book Section */
.book-section {
  position: relative;
  min-height: 600px;
  padding: 4rem 0;
}

.book-section .row {
  display: flex;
  align-items: center;
}

.book-content {
  color: white;
  padding: 1rem;
}

.book-content h1,
.book-content h2 {
  color: white;
  margin-bottom: 2rem;
}

.book-content p {
  color: white;
  text-align: justify;
  margin-bottom: 1.5rem;
}

.book-content strong {
  font-weight: 600;
}

/* Book section gradients */
.hannya-section {
  background: linear-gradient(90deg, #4967ac 0%, #070d34 100%);
}

.dataru-section {
  background: linear-gradient(135deg, #344444 0%, #054691 100%);
}

/* Book Carousel - fade-based */
.book-carousel {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.book-carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.book-carousel-slide.active {
  opacity: 1;
}

.book-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Book button - variant of btn-primary with inverted colors for dark backgrounds */
.btn-book {
  border: 2px solid #ffffff;
  background-color: #ffffff;
  color: #054691;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 2.25rem;
  font-weight: 600;
  margin-top: 2rem;
}

.btn-book:hover {
  background-color: transparent;
  color: #ffffff;
}

/* Book section responsive */
@media (min-width: 769px) and (max-width: 1200px) {
  .book-section .row {
    display: flex;
    flex-direction: row;
  }

  .book-section .six.columns {
    width: 48%;
  }
}

@media (max-width: 768px) {
  .book-section .row {
    flex-direction: column;
  }

  .book-section .six.columns {
    width: 100%;
  }

  .book-carousel {
    height: 400px;
  }
}

/* Utility */
.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.mt-2 {
  margin-top: 2rem;
}

.mb-2 {
  margin-bottom: 2rem;
}