/* src/style.css */

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/CormorantGaramond-Light.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/CormorantGaramond-LightItalic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* 1. General Body & Typography */
body {
  /* Use the classic serif font we imported */
  font-family: 'Cormorant Garamond', serif;
  line-height: 1.7;
  
  /* Light grey background like the reference site */
  background-color: #f7f7f7;
  color: #333;
  margin: 0;
  padding: 2rem 1rem; /* Add some padding for smaller screens */
}

h1, h2, h3 {
  font-weight: 700; /* Bolder weight for headings */
  line-height: 1.2;
}

a {
  color: #333;
  text-decoration: none;
}

/* 2. Main Container Layout */
.container {
  max-width: 960px; /* Set a max-width for the content */
  margin: 0 auto;   /* Center the container on the page */
  padding: 2rem 3rem;
  background-color: #fff; /* White background for the content area */
  border: 1px solid #e0e0e0; /* Subtle border */
}

/* 3. Header & Navigation Styling */
header {
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

header h1 {
  margin: 0;
  font-size: 2rem;
}

header nav {
  margin-top: 1rem;
}

header nav a {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  margin: 0 1rem;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent; /* For hover effect */
  transition: border-color 0.2s ease-in-out;
}

header nav a:hover {
  border-bottom-color: #333; /* Underline on hover */
}


/* 4. Book Gallery Styling (Homepage) */
/* =================================================================== */
/* 4. Book Gallery Styling (Homepage) - REVISED AND RIGID METHOD       */
/* =================================================================== */

.book-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2rem;
}

.book-card {
  text-decoration: none;
  color: #333;
  /* We will let the children's height determine the card height */
}

.book-card img {
  width: 100%;
  
  /*
    KEY CHANGE #1: Set an explicit, fixed height.
    This forces every image box to be identical. 240px is a 
    good starting point, but you can adjust it.
  */
  height: 240px;

  /* This remains critical to prevent image distortion */
  object-fit: contain;
  background-color: #f9f9f9;
  
  /* We remove aspect-ratio as we now have a fixed height */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.book-card:hover img {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.book-card-info {
  /*
    KEY CHANGE #2: Give the text area a fixed height too.
    This must be tall enough for a title that wraps to two lines.
    90px is a good starting point.
  */
  height: 90px;

  /* These flex properties will vertically center the text inside the fixed-height box */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
}

.book-card-info h3 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.3; /* Helps control wrapped titles */
}

.book-card-info p {
  margin: 0.25rem 0 0 0;
  color: #666;
  font-size: 1rem;
}

/* 5. Book Detail Page Styling (Two-Column Layout) */
.book-detail {
  display: flex; /* Use Flexbox to create columns */
  flex-wrap: wrap; /* Allow columns to wrap on small screens */
  gap: 2rem;       /* Space between image and text */
}

.book-cover {
  flex: 1 1 300px; /* Flex properties: grow, shrink, basis */
  min-width: 250px;
}

.book-cover img {
  width: 100%;
  height: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.book-info {
  flex: 2 1 400px; /* Make the text column wider */
}

.book-info h1 {
  margin-top: 0;
  font-size: 2.5rem;
}

.book-info .year {
  margin-top: -1rem;
  margin-bottom: 1.5rem;
  color: #555;
  font-size: 1.2rem;
}

/* 6. Footer Styling */
footer {
  text-align: center;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e0e0e0;
  color: #888;
  font-size: 0.9rem;
}


/* =================================================================== */
/* 7. Custom List Styling                                              */
/* =================================================================== */

main ul {
  list-style-type: none;
  padding-left: 1rem;
}

/* =================================================================== */
/* 8. Full-Width Poster Styling                                      */
/* =================================================================== */

.exhibition-poster {
  /* Center the poster on the page */
  margin: 2rem auto 3rem; 
  text-align: center;
}

.exhibition-poster picture {
  /* Ensure the picture element behaves correctly */
  display: block;
}

.exhibition-poster img {
  /* Allow the image to be full width but not larger than a max size */
  width: 100%;
  max-width: 600px; /* Adjust this value as needed */
  height: auto;

  /* Add a nice shadow to lift it off the page */
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  border: 1px solid #eee; /* A subtle border */
}


/* =================================================================== */
/* 10. Inline Book Link Styling                                        */
/* =================================================================== */

/* This targets ONLY the links generated by our bookLink shortcode */
.book-link-inline {
  color: inherit; 
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease-in-out;
}

.book-link-inline:hover {
  color: #005f73;
}

/* Fix style for mobile nav */
@media (max-width: 600px) {
  header nav a {
    display: block;
    text-align: center;
  }
}