/* JMMS v16.5 — widescreen enhancement.
   Only activates for wide browser viewports; phones and laptops are unchanged.
   This is deliberately presentation-only: no new HTML, JS, or database fields. */

@media screen and (min-width: 1600px) {
  /* Give 16:9 / ultrawide displays a proper layout without endless line lengths. */
  .site-header {
    max-width: 1800px;
    padding-left: clamp(48px, 3.8vw, 76px);
    padding-right: clamp(48px, 3.8vw, 76px);
  }
  main, footer {
    max-width: 1740px;
    padding-left: clamp(48px, 3.8vw, 76px);
    padding-right: clamp(48px, 3.8vw, 76px);
  }
  #navigation { font-size: 15px; gap: clamp(20px, 1.5vw, 30px); }
  .brand { font-size: 16px; }

  /* Spacious first impression: large image, restrained typography. */
  .hero {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(65px, 5vw, 120px);
    padding-top: clamp(66px, 4.6vw, 96px);
    padding-bottom: clamp(72px, 5vw, 110px);
  }
  .hero-copy { max-width: 750px; }
  .hero h1 {
    font-size: clamp(76px, 5.1vw, 102px);
    line-height: 1.04;
    max-width: 720px;
  }
  .hero .lead { font-size: clamp(17px, 1.06vw, 19px); max-width: 510px; }
  .hero-image img {
    height: clamp(520px, 31vw, 640px);
    object-fit: cover;
    object-position: center 42%;
  }

  /* Three current news items become a magazine-style row rather than an
     overly long, sparse list on a very wide monitor. */
  .home-news {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(26px, 2.6vw, 54px);
    padding-bottom: 80px;
  }
  .home-news .section-heading {
    grid-column: 1 / -1;
    padding-top: 42px;
    padding-bottom: 16px;
  }
  .home-story {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    align-content: start;
    align-items: start;
    gap: 13px;
    padding: 24px 0 27px;
    border-top: 1px solid var(--line);
    border-bottom: 0;
  }
  .home-story time { grid-column: 1 / -1; }
  .home-story h3 { font-size: clamp(20px, 1.3vw, 24px); line-height: 1.42; max-width: none; }
  .home-story > span { font-size: 23px; }

  /* Use more of the screen for image-led catalogues, not for long paragraphs. */
  .album-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(26px, 2.4vw, 45px); }
  .page-heading h1 { max-width: 1160px; }
  .article-body { max-width: 900px; } /* Keep prose readable. */
  .room-grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr); gap: clamp(50px, 4.3vw, 96px); }
}

@media screen and (min-width: 2200px) {
  .site-header { max-width: 2070px; }
  main, footer { max-width: 1960px; }
  .hero { gap: clamp(90px, 5.6vw, 154px); }
  .hero-image img { height: clamp(590px, 29vw, 710px); }
  .home-news { column-gap: clamp(50px, 3vw, 76px); }
  .album-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Explicitly keep old printing proportions, even when printing from a 4K monitor. */
@media print {
  .site-header, main, footer { max-width: none; }
  .hero { grid-template-columns: 1fr 1fr; }
  .home-news { display: block; }
  .home-story { display: block; }
  .album-grid { grid-template-columns: repeat(3, 1fr); }
}