/* Reference screenshot: 1300px blue surface, 1100px content, 15px card gaps,
   1px title rule, 55px between rule and cards, 20px card corners. */
.blog-surface {
  width: min(100%, 1300px);
  margin-inline: auto;
  background: var(--blue-soft);
}
.blog-surface .booking-section { padding-top: 0; }
.blog-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 45px 0 40px;
}
.blog-index > h1 {
  margin: 0 0 55px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--blue);
  text-align: center;
  color: var(--blue);
  font: 800 41px/1.2 Arial, sans-serif;
  text-transform: uppercase;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  min-height: 520px;
  background-color: var(--blue);
  background-image: radial-gradient(at top left, #289aaf 0%, var(--blue) 71%);
}
.blog-card > a img { width: 100%; height: auto; aspect-ratio: 1 / .65; object-fit: cover; }
.blog-card-copy { padding: 30px; display: flex; flex-direction: column; flex: 1; text-align: center; align-items: center; }
.blog-card h2 { margin: 0 0 20px; color: #cca95e; font: 600 19px/1.2 Arial, sans-serif; }
.blog-card h2 a { text-decoration: none; }
.blog-card p { margin: 0 0 20px; font-size: 17px; line-height: 1.4; color: #e5e6e8; }
.blog-card .global-button { margin-top: auto; align-self: center; min-height: 37px; padding: 9px 20px; font-size: 17px; font-weight: 500; line-height: 19px; background: var(--yellow); box-shadow: none; }
.blog-article h1 { margin: 0 0 32px; font: 700 42px/1.2 "Jost", sans-serif; color: #cca95e; }
.blog-article-intro { display: flex; align-items: center; gap: 30px; margin-bottom: 38px; }
.blog-hero { width: 36%; height: auto; }
.blog-article-intro > p { flex: 1; font-size: 22px; line-height: 1.4; }
.blog-article-body h2 { margin: 10px 0 16px; font: 600 28px/1.4 Arial, sans-serif; color: var(--blue); }
.blog-article-body p, .blog-article-body li { font-size: 17px; line-height: 1.4; }
.blog-article-body p { margin: 0 0 10px; }
.blog-article-body a { text-decoration: underline; }
.blog-article-body { overflow-wrap: anywhere; }
@media (max-width: 1199px) {
  .blog-main { margin-inline: 40px; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 600px) {
  .blog-main { margin-inline: 35px; padding-top: 20px; }
  .blog-index > h1 { font-size: 26px; margin-bottom: 60px; }
  .blog-grid { grid-template-columns: minmax(0, 1fr); margin-inline: 15px; }
  .blog-card-copy { padding: 25px 20px; }
  .blog-card h2 { font-size: 24px; }
  .blog-detail { margin-inline: 20px; }
  .blog-article h1 { font-size: 28px; }
  .blog-article-intro { flex-direction: column; align-items: stretch; gap: 20px; }
  .blog-hero { width: 100%; }
  .blog-article-body h2 { font-size: 28px; }
}