/**
 * AM2027 — Hotel and Venue page.
 *
 * One entry per hotel: photograph on the left, everything else on the right,
 * stacking on narrow screens. The rate / block / cut-off block is a <dl> laid
 * out as a two-column grid rather than a table -- three label-value pairs are
 * not tabular data, and a grid collapses to one column on a phone without the
 * horizontal scroll a table would need.
 */

.hotels-notice{
  border-left:3px solid var(--orange);background:var(--wash);
  border-radius:0 6px 6px 0;padding:14px 18px;margin:25px 0 30px;
}
.hotels-notice > :last-child{margin-bottom:0}

.hotel{
  display:grid;grid-template-columns:320px 1fr;gap:26px;
  padding:26px 0;border-top:1px solid var(--line);
}
.hotel:first-of-type{border-top:0;padding-top:6px}

.hotel-shot img{
  width:100%;height:auto;display:block;
  border-radius:8px;aspect-ratio:4/3;object-fit:cover;
}

.hotel-name{
  margin:0 0 10px;font-size:calc((21px) * var(--fs,1));font-weight:700;line-height:1.25;
  color:var(--navy);letter-spacing:-.01em;
}
/* The status is part of the heading, so it is not a separate element in the
   reading order -- it reads as "Harrah's Las Vegas SOLD OUT". */
.hotel-status{
  display:inline-block;margin-left:8px;
  padding:3px 9px;border-radius:3px;vertical-align:2px;
  background:#FDECEC;color:#B3261E;
  font-size:calc((11.5px) * var(--fs,1));font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}

.hotel-addr{
  display:flex;gap:9px;margin:0 0 8px;
  font-size:calc((14.5px) * var(--fs,1));line-height:1.55;color:var(--slate);
}
.hotel-addr svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--teal)}

.hotel-note{margin:0 0 10px;font-size:calc((14.5px) * var(--fs,1));line-height:1.55;color:var(--slate)}

.hotel-avail{margin:0 0 14px;font-size:calc((14.5px) * var(--fs,1));line-height:1.55}
.hotel-avail strong{color:var(--navy)}
.hotel-avail strong::after{content:" —"}
.hotel-avail span{color:#B3261E}

.hotel-facts{
  display:grid;grid-template-columns:auto 1fr;
  margin:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  font-size:calc((14.5px) * var(--fs,1));
}
.hotel-facts dt{
  padding:10px 14px;background:var(--wash);
  color:var(--navy);font-weight:700;white-space:nowrap;
}
.hotel-facts dd{margin:0;padding:10px 14px;color:var(--slate)}
/* Every row after the first gets a rule. Both cells of a row need it, so the
   pair is selected rather than the row (a grid has no row element). */
.hotel-facts dt:not(:first-of-type),
.hotel-facts dd:not(:first-of-type){border-top:1px solid var(--line)}

.hotel-closed{color:#B3261E;font-weight:600}
.hotel-facts s{color:var(--slate)}

.hotel-cta{margin:14px 0 0}

@media(max-width:820px){
  .hotel{grid-template-columns:1fr;gap:16px}
  .hotel-shot img{aspect-ratio:16/9}
}
@media(max-width:520px){
  /* Label above value: at this width a nowrap label column leaves the value
     almost no room. */
  .hotel-facts{grid-template-columns:1fr}
  .hotel-facts dt{padding-bottom:0;background:none}
  .hotel-facts dd:not(:first-of-type){border-top:0}
  .hotel-facts dt:not(:first-of-type){border-top:1px solid var(--line)}
}

/* ---------- notice headings ----------
   Coloured per page (field_heading_color -> --notice-heading), brand blue by
   default. The inner <strong> is reset because .prose strong forces navy, and
   editors often bold a heading as well. */
.hotels-notice.prose h2,
.hotels-notice.prose h3,
.hotels-notice.prose h4{color:var(--notice-heading, var(--teal))}
.hotels-notice.prose :is(h2,h3,h4) strong{color:inherit}
/* The intro arrives wrapped in field markup, so .prose > :first-child cannot
   reach its first heading -- without this it sat 34px below the box's top. */
.hotels-notice :is(h2,h3,h4):first-child{margin-top:0}

/* ---------- Registration & Housing button, and "coming soon" ---------- */
/* Two classes on purpose: .prose p (0,1,1) would otherwise win and zero the
   top margin, leaving the button pressed against the paragraph above it. */
.hotels-notice .hotels-register{margin:18px 0 0}
.prose .hotels-register a,
.hotel-cta a{text-decoration:none}
/* A coming-soon button keeps the button colours from the Button colors screen
   but is visibly inert: softened, no hover change, default cursor, and a tag
   that says why. It is a <span>, so it is not focusable or clickable. */
.btn.is-coming-soon{
  cursor:default;opacity:.72;gap:10px;
}
.btn-solid.is-coming-soon:hover{
  background:var(--btn-solid-bg,#2c6fb0);
  color:var(--btn-solid-fg,#fff);
  border-color:var(--btn-solid-border,var(--teal));
}
.soon-tag{
  display:inline-block;padding:3px 7px;border-radius:3px;
  background:rgba(255,255,255,.22);
  font-size:calc((10.5px) * var(--fs,1));font-weight:700;letter-spacing:.12em;line-height:1.2;
  /* The label may wrap on a phone; the tag must not split across two lines. */
  white-space:nowrap;
}