/* Base styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #f4f6f8;
  color: #333;
  line-height: 1.6;
  font-size: 16px; /* 全体的に文字を少し大きく */
}

.site-header {
  text-align: center;
  padding: 2rem 1rem;
  background-color: #fff;
  border-bottom: 1px solid #e0e4e8;
}

.site-header h1 {
  margin: 0;
  font-size: 2.2rem;
}

.site-header p {
  margin-top: 0.5rem;
  color: #666;
  font-size: 1.1rem;
}

.site-footer {
  text-align: center;
  padding: 1rem;
  background-color: #fff;
  border-top: 1px solid #e0e4e8;
  color: #999;
  font-size: 0.9rem;
  margin-top: 2rem;
}

/*
 * Define base colour tokens for each of the six categories.  
 * These root-level variables make it easy to change a category's
 * colour scheme in one place.  
 * Example: to change Category02's primary colour, edit
 *   --category02-primary and --category02-accent below.
 */
:root {
  --category01-primary: #ff8d00; /* warm orange */
  --category01-accent: #fff5e6;
  --category02-primary: #ff1a33; /* vivid red */
  --category02-accent: #ffe6ec;
  --category03-primary: #ff1ac0; /* magenta */
  --category03-accent: #ffe6f5;
  --category04-primary: #27ccb3; /* turquoise */
  --category04-accent: #e7f7f4;
  --category05-primary: #8ccbe3; /* soft blue */
  --category05-accent: #eef6fa;
  --category06-primary: #c8a2e2; /* lavender purple */
  --category06-accent: #f5f0fa;
}

/*
 * Each category section sets its own CSS custom properties
 * (--color-primary and --color-accent) using the root variables.
 * This approach groups all colour assignments together, making it
 * straightforward to customise colours for any category by changing
 * the corresponding root variables.
 */
.category01 {
  --color-primary: var(--category01-primary);
  --color-accent: var(--category01-accent);
}
.category02 {
  --color-primary: var(--category02-primary);
  --color-accent: var(--category02-accent);
}
.category03 {
  --color-primary: var(--category03-primary);
  --color-accent: var(--category03-accent);
}
.category04 {
  --color-primary: var(--category04-primary);
  --color-accent: var(--category04-accent);
}
.category05 {
  --color-primary: var(--category05-primary);
  --color-accent: var(--category05-accent);
}
.category06 {
  --color-primary: var(--category06-primary);
  --color-accent: var(--category06-accent);
}

/* Generic category section */
.category {
  padding: 2rem 1rem;
  background-color: var(--color-accent); /* light background matching category color */
}

/*
 * Limit the width of the category title and its content while leaving
 * the coloured background of the category section at full page width.
 * This rule centres the content and constrains it to a maximum of
 * 1400px on wide screens.
 */
.category > h2.category-title,
.category > .prefecture {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* Generic category title */
.category-title {
  background-color: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.6rem;
}

.prefecture-title {
  /* Give prefecture titles more prominence with a card-like background */
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background-color: #fff; /* separate from region background */
  border-left: 6px solid var(--color-primary);
  border-radius: 6px;
  font-size: 1.4rem;
  font-weight: 700;
  /* color: #333; */
  color: var(--color-primary);
}

/* Connect exhibits visually to their prefecture by indenting and adding a vertical line */
/* Group exhibits under each prefecture by indentation without a vertical line */
.prefecture > .exhibits {
  margin-left: 1rem;
  padding-left: 0;
}

/* Exhibits list: one exhibit per row */
.exhibits {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Exhibit body: horizontally align the logo, text and image sections */
.exhibit-body {
  display: flex;
  /* Align contents to the top of the card */
  align-items: flex-start;
  flex-wrap: nowrap;
}

.exhibit {
  background-color: #fff;
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Header: title and attributes on same line */
.exhibit-header {
  padding: 0.75rem 1rem;
  border-bottom: 3px solid var(--color-primary);
  display: flex;
  align-items: flex-start; /* align badges with top when titles wrap to multiple lines */
  flex-wrap: wrap;
}

/* Exhibit titles should stand out compared to team names */
.exhibit-title {
  margin: 0;
  font-size: 1.3rem; /* larger than team names */
  font-weight: 700;   /* bolder weight to emphasize */
  flex-grow: 1;
  margin-right: 1rem;
  color: #333;
}

.attributes {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Attribute labels
 * Normal attributes are rendered with a simple outline and dark text.  
 * The special "オススメ" attribute uses the highlighted design inherited
 * from earlier versions (colored background and white text).
 */
.attribute {
  background-color: transparent;
  color: #333;
  border: 1px solid #ccc;
  padding: 0.25rem 0.65rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-left: 0.4rem;
  margin-top: 0.2rem;
  white-space: nowrap;
}
.attribute.recommended {
  background-color: var(--color-primary);
  color: #fff;
  border: none;
}

/* Team info */
/* Team info section: contains logo and text.  
   Display flex horizontally so that the logo and text occupy their own columns.  
   Allow the section to grow and fill the available width when there is no image. */
.team-info {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  /* Remove the border-bottom here; a horizontal rule is added on the entire body if needed */
  flex: 1 1 70%;
}

/* Team logo takes up only as much space as needed.  
   We fix its dimensions but prevent it from stretching with flex. */
/*
 * Team logos may vary in size; set a maximum size to 200px for both
 * dimensions to prevent oversized images from breaking the layout.
 * A default size of 80px ensures logos are clearly visible on most screens.
 */
/*
 * Adjust team logo sizing and scaling.  
 * Use object-fit: contain so the entire logo image scales down to fit within
 * the maximum dimensions without cropping. Set width/height to auto
 * to preserve the aspect ratio. The max-height can be tuned (e.g. 150px)
 * to control the maximum vertical size of the logo.
 */
.team-logo {
  align-self: center;
  width: auto;
  height: auto;
  max-width: 300px;
  max-height: 150px;
  object-fit: contain;
  flex: 0 0 auto;
}

.team-name {
  margin: 0;
  font-weight: 600; /* slightly lighter than exhibit title */
  font-size: 1.1rem; /* slightly smaller than exhibit title */
  color: #333;
  margin-bottom: 0.35rem;
}

.team-description {
  margin: 0;
  font-size: 1rem;
  color: #666;
}

/* Ensure team text expands to fill available space within the team-info area */
.team-text {
  flex: 1 1 auto;
}

/* Image wrapper and image */
/* Exhibit image wrapper sits on the right and occupies ~25% of the row.  
   When empty, it will not take up space thanks to :empty rule below. */
.exhibit-image-wrapper {
  flex: 0 0 25%;
  max-width: 30%;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
}

/* Only allocate space if image exists; hide wrapper when empty */
.exhibit-image-wrapper:empty {
  display: none;
}

/* Exhibit image should scale to fit its container without cropping.  
   Limit height to 250px and maintain aspect ratio using contain. */
.exhibit-image {
  width: 100%;
  height: auto;
  max-height: 300px;
  display: block;
  object-fit: contain;
}

/* Footer for PDF link: align items to the left. */
.exhibit-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid #e5e9ec;
  display: flex;
  justify-content: flex-start;
}

.pdf-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
}

.pdf-link:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  /* On larger screens ensure the exhibit image does not exceed 250px in height.  
     Height is determined by its aspect ratio and container width. */
  .exhibit-image {
    max-height: 300px;
    height: auto;
  }
}

/* Responsive layout adjustments for narrow viewports */
@media (max-width: 767px) {
  /* Stack the team-info and exhibit-image vertically on small screens */
  .exhibit-body {
    flex-direction: column;
  }
  /* Make the image wrapper span full width and center its content */
  .exhibit-image-wrapper {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* Prevent the image from overflowing its container */
  .exhibit-image {
    width: auto;
    max-width: 100%;
    height: auto;
  }

  /*
   * Stack the team logo and team text vertically on narrow viewports.
   * This ensures that on small screens the logo appears above the
   * team name and description instead of side‑by‑side.
   */
  .team-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .team-logo {
    margin-bottom: 0.5rem;
  }
  .team-text {
    width: 100%;
  }
}