/* /accommodation/ — page-specific rules. Shared rules are in /assets/site.css.
   Production served this page on Astra's older "separate container" template:
   the header sits in normal flow on an opaque white bar, the content is a
   white card inside a 1340px container, and the page's own sf-acc styles do
   the rest. Values are the computed ones from production at 1440 / 390. */

/* Astra container > article card (the entry-header's 1.5em margin is folded into the top padding) */
.acc-wrap { padding: 0 6.5%; } /* same side inset as /contact/ and /about-us-2/ */
.acc-article { background: var(--c-white); }

/* hero: the site's standard hero (geometry in site.css) */
.hero--accommodation { background-image: url("/wp-content/uploads/2026/09/accommodation-hero.jpg"); }
.hero--accommodation::before { opacity: .2; }
/* "ACCOMMODATION" is one long word: keep the standard title size wherever it fits on one
   line, and scale it down only at the widths where it would otherwise break mid-word. */
.hero--accommodation h1 { font-size: min(100px, 9.1vw); }
@media (max-width: 921px) { .hero--accommodation h1 { font-size: min(70px, 9.1vw); } }
@media (max-width: 767px) { .hero--accommodation h1 { font-size: min(70px, 10.3vw); } }
@media (max-width: 544px) { .hero--accommodation h1 { font-size: min(40px, 10.3vw); } }

/* body copy */
.acc { padding: 6% 0; }
.acc p { margin: 0 0 1.6em; }
.acc h2, .acc h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; line-height: 1; color: var(--c-brown); }
.acc h2 { margin-bottom: 14px; font-size: 2.4rem; text-align: center; text-transform: uppercase; }
.acc h3 { margin-bottom: 6px; font-size: 1.5rem; }
.acc-rule { width: 60px; height: 1px; margin: 0 auto 44px; border: 0; background: var(--c-sand); }
.acc section { margin-bottom: 76px; }
.acc section:last-child { margin-bottom: 0; }
.acc .acc-lede { max-width: 700px; margin: 0 auto 32px; font-size: 1.05rem; text-align: center; opacity: .9; }

.acc-notice {
  margin: 0 0 8px;
  padding: 26px 32px;
  border: 1px solid var(--c-sand);
  background: var(--c-cream);
  text-align: center;
}
.acc-notice p { margin: 0; font-size: .95rem; }
/* below 922px the page itself is cream, so the cream notice blended in: white there, keeping its sand border */
@media (max-width: 921px) { .acc-notice { background: var(--c-white); } }
.acc-notice__title {
  display: block;
  margin-bottom: 8px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* room cards */
.acc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.acc-card { display: flex; flex-direction: column; padding: 26px 24px; border: 1px solid #e2e2e2; background: var(--c-white); }
.acc .acc-card__desc { margin-bottom: 16px; font-size: .92rem; opacity: .85; }
.acc-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ece6dd;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.acc-card__stats span { white-space: nowrap; }
.acc-card__stats b { display: block; font-family: var(--font-serif); font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.acc-card__label { display: block; margin-bottom: 4px; font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .7; }
.acc .acc-card__facilities { margin: 0; font-size: .88rem; opacity: .85; }
.acc-card__rate { margin-top: auto; padding-top: 14px; font-family: var(--font-serif); font-size: 1.1rem; font-weight: 400; }
.acc-card__rate small { display: block; margin-top: 2px; font-size: .72rem; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; opacity: .7; }
.acc .acc-card__note { margin-top: 10px; font-size: .82rem; font-style: italic; opacity: .8; }

/* terms */
.acc-terms__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.acc-term { padding-top: 16px; border-top: 1px solid var(--c-sand); }
.acc-term h3 { font-size: 1.25rem; }
.acc-term p { margin: 0; font-size: .95rem; }
.acc .acc-terms__note { margin-top: 24px; padding-top: 20px; border-top: 1px solid #ece6dd; font-size: .92rem; text-align: center; opacity: .85; }

/* alternative accommodation */
/* the section opens with a .band (site.css); its photo is a licensed stock image, not a Smitsfield photo,
   because the options listed are other properties. Source recorded in docs/SITE-SYSTEM.md. */
.band--alt-accommodation { background-image: url("/wp-content/uploads/2026/09/alternative-accommodation.jpg"); }
/* "ACCOMMODATION" is wider than a phone band allows at the standard 35px heading (it broke mid-word at 390px):
   shrink it only as far as needed there; 45px and 65px already fit on tablet and desktop. */
@media (max-width: 544px) { .band--alt-accommodation h2 { font-size: min(35px, 8.6vw); } }
.acc-alt__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.acc-alt-card { display: flex; flex-direction: column; padding: 20px 22px; border: 1px solid #e2e2e2; background: var(--c-white); }
.acc-alt-card h3 { margin-bottom: 8px; font-size: 1.2rem; }
.acc-alt-card__meta { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.acc-alt-card__contact { font-size: .85rem; opacity: .9; }
.acc-alt-card__action { margin-top: auto; }
.acc-alt-card__action a {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--c-brown);
  color: var(--c-brown);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.acc-alt-card__action a:hover { background: var(--c-brown); color: var(--c-white); }

/* Astra breakpoints for the container/card; the page's own were 900 and 640 */
@media (max-width: 921px) {
  .acc-article { background: var(--c-cream); }
}
@media (max-width: 900px) {
  .acc-grid, .acc-alt__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .acc h2 { font-size: 1.9rem; }
  .acc-grid, .acc-alt__grid, .acc-terms__grid { grid-template-columns: 1fr; }
  .acc-notice { padding: 20px; }
}