/* =====================================================================
   ACCOMMODATION — redesign styles  (Summit '26)
   Append to summit.css, or enqueue after it.
   Relies on the :root variables already defined in summit.css
   (--coral, --teal, --dark-teal, --brown, --cream, --border, etc.)
   Requires the "Space Mono" Google Font to be loaded (see HANDOFF.md).
   ===================================================================== */

:root {
    /* solid cream used for the "punched" hanger hole + slot.
       Tweak to taste if it doesn't read against the page background. */
    --hanger-hole: #f1e6cf;
}

/* ---------------------------------------------------------------------
   1. CHECK-IN / OUT — swinging door hangers
   --------------------------------------------------------------------- */
.checkin-hangers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin: 4px 0 34px;
    padding: 8px 0 4px;
    scroll-margin-top: 84px;
}
.door-hanger {
    flex: 1 1 300px;
    max-width: 360px;
    display: flex;
    justify-content: center;
    transform-origin: 50% 4px;
    animation: hangSwayA 4.6s ease-in-out infinite;
}
.door-hanger--out {
    animation-name: hangSwayB;
    animation-duration: 5.3s;
    animation-delay: -1.4s;
}
.door-hanger:hover { animation-play-state: paused; }

.door-hanger__card {
    position: relative;
    width: 100%;
    padding: 108px 28px 34px;
    border-radius: 28px;
    text-align: center;
    color: #fff;
}
.door-hanger--in .door-hanger__card {
    background: linear-gradient(180deg, #27a05f, #1b8049);
    border: 1px solid rgba(12, 70, 40, .25);
    box-shadow: 0 26px 50px rgba(20, 110, 70, .34);
}
.door-hanger--out .door-hanger__card {
    background: linear-gradient(180deg, #ec5a45, #d8462f);
    border: 1px solid rgba(120, 30, 20, .22);
    box-shadow: 0 26px 50px rgba(216, 70, 47, .34);
}

/* punched hole + slot at the top (where it hangs on the handle) */
.door-hanger__slot {
    position: absolute;
    left: 50%;
    top: -1px;
    transform: translateX(-50%);
    width: 16px;
    height: 36px;
    border-radius: 0 0 8px 8px;
    background: var(--hanger-hole);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .12), inset -1px 0 0 rgba(0, 0, 0, .12);
}
.door-hanger__hole {
    position: absolute;
    left: 50%;
    top: 26px;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--hanger-hole);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .3), inset 0 -1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(255, 255, 255, .5);
}

.door-hanger__ribbon {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 999px;
    font-family: "Space Mono", monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
}
.door-hanger--in .door-hanger__ribbon  { background: #15743f; box-shadow: 0 6px 14px rgba(10, 60, 35, .35); }
.door-hanger--out .door-hanger__ribbon { background: #b83a26; box-shadow: 0 6px 14px rgba(150, 40, 25, .35); }

.door-hanger__time {
    display: block;
    margin: 16px 0 8px;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: clamp(50px, 6.4vw, 68px);
    line-height: 1;
}
.door-hanger__date {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, .92);
}
.door-hanger__divider {
    display: block;
    width: 72%;
    margin: 18px auto 0;
    border-top: 1.5px dashed rgba(255, 255, 255, .4);
}
.door-hanger__note {
    display: block;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

@keyframes hangSwayA {
    0%, 100% { transform: rotate(-3.2deg); }
    50%      { transform: rotate(2.2deg); }
}
@keyframes hangSwayB {
    0%, 100% { transform: rotate(3deg); }
    50%      { transform: rotate(-2.4deg); }
}
@media (prefers-reduced-motion: reduce) {
    .door-hanger { animation: none !important; }
}

/* ---------------------------------------------------------------------
   2. OVERVIEW — "stay" card with stamp strip
   --------------------------------------------------------------------- */
.stay-card {
    position: relative;
    margin-bottom: 26px;
    overflow: hidden;
    border-radius: 28px;
    background: var(--white);
    border: 1px solid #efe2c8;
    box-shadow: 0 18px 44px rgba(120, 90, 40, .16);
    scroll-margin-top: 84px;
}
.stay-card__strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 26px;
    background: var(--dark-teal);
    color: #cdeae7;
    font-family: "Space Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.stay-card__strip span:last-child { color: #7fc3bd; }

.stay-card__body { display: flex; flex-wrap: wrap; }
.stay-card__media {
    flex: 1 1 320px;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    padding: 0;
    background-color: #d9efd2;
    background-image: repeating-linear-gradient(135deg, rgba(25, 156, 149, .10) 0 14px, rgba(25, 156, 149, .02) 14px 28px);
    overflow: hidden;
}
.stay-card__media span {
    font-family: "Space Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--dark-teal);
    background: rgba(255, 255, 255, .8);
    border-radius: 10px;
    padding: 7px 13px;
}
.stay-card__media img { width: 100%; min-height: 320px; object-fit: cover; }

.stay-card__info { flex: 2 1 420px; padding: clamp(26px, 3.5vw, 40px); }
.stay-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    font-family: "Space Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal);
}
.stay-card__info h2 {
    margin: 0;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: clamp(34px, 4.4vw, 46px);
    line-height: 1;
    color: var(--brown);
}
.stay-card__info > p {
    margin: 14px 0 0;
    max-width: 520px;
    color: var(--brown-soft);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 600;
}

.info-rows {
    margin-top: 24px;
    border-top: 1.5px dashed var(--border);
}
.info-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1.5px dashed var(--border);
}
.info-row:last-child { border-bottom: 0; align-items: center; }
.info-row__icon {
    width: 42px;
    height: 42px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 18px;
}
.info-row small {
    font-family: "Space Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal);
}
.info-row p { margin: 3px 0 0; font-size: 15px; font-weight: 700; color: var(--brown); }
.info-row a { color: var(--teal); font-weight: 800; text-decoration: none; }

/* ---------------------------------------------------------------------
   3. Shared bits — section head, pill tag, amenity hover
   --------------------------------------------------------------------- */
.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 26px;
}
.section-head h2 { margin: 0; }
.section-head__meta {
    font-family: "Space Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--faint);
}
.pill-tag {
    font-family: "Space Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--faint);
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--cream);
}

/* gentle lift on amenity cards */
.amenity-card { transition: transform .15s ease, box-shadow .15s ease; }
.amenity-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

/* mono chips inside amenity cards (optional — matches the redesign) */
.amenity-card .chip-row span { font-family: "Space Mono", monospace; }

/* house rules: keep to two balanced columns on the redesign */
.rules-grid { grid-template-columns: repeat(2, 1fr); }

/* ---------------------------------------------------------------------
   4. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 660px) {
    .rules-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .door-hanger { max-width: 100%; }
    .checkin-hangers { gap: 28px; }
}