/**
 * Villa Rates section — head, seasonal rate table, policies and an FAQ
 * accordion, on the cream band. Depends on villa-home.css.
 *
 * @package Villa_Addon
 */

.vo-rates { background: var(--cream); padding-block: var(--sp-160); padding-inline: var(--pad-x); }
.vo-rates__inner { width: 100%; margin-inline: auto; }

.vo-rates__head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
.vo-rates__answer { font-family: var(--display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 34px); line-height: 1.28; color: var(--dark); margin: 0; }
/* The Answer/Note come from a WYSIWYG field, so they may arrive wrapped in their
   own <p>. The wrapper is a <div>, and these rules let those inner paragraphs
   inherit the answer/note type instead of resetting to the body font. */
.vo-rates__answer p, .vo-rates__note p { margin: 0; font: inherit; color: inherit; }
.vo-rates__answer p + p, .vo-rates__note p + p { margin-top: .7em; }
.vo-rates__answer b, .vo-rates__answer strong { font-weight: 600; border-bottom: 2px solid var(--teal); }
.vo-rates__note { margin: 1.1rem 0 0; font-size: 18px; line-height: 1.4; }

.vo-rates__table { margin-top: 80px; }
.rate { display: grid; grid-template-columns: 1.1fr 1.5fr .8fr .9fr; gap: 1.5rem; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }
.rate:first-child { border-top: 1px solid var(--line); }
.rate__season { font-family: var(--display); font-size: 28px; font-weight: 600; color: var(--dark); display: flex; align-items: center; gap: .7rem; }
.rate__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rate__dates { font-size: 18px; line-height: 1.4; }
.rate__price { font-family: var(--display); font-size: 30px; font-weight: 600; color: var(--dark); text-align: right; }
.rate__extra { font-size: 15px; text-align: right; }

.policies { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 70px; }
.policy__h { font-family: var(--sans); font-size: 18px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1.1rem; color: var(--dark); }
.policy p { font-size: 18px; line-height: 1.4; margin: 0; }
.policy p + p { margin-top: .8rem; }
.policy strong { color: var(--dark); font-weight: 500; }

.faq__title { margin: clamp(56px, 7vw, 90px) 0 1.4rem; }
.faq { margin-top: 0; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 26px 0; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--display); font-size: clamp(1.25rem, 1.1rem + .6vw, 28px); font-weight: 600; color: var(--dark); white-space: normal; }
.faq__ic { position: relative; width: 20px; height: 20px; flex: none; }
.faq__ic::before, .faq__ic::after { content: ""; position: absolute; background: var(--dark); transition: transform .35s var(--ease); }
.faq__ic::before { top: 9px; left: 0; width: 20px; height: 1.5px; }
.faq__ic::after { left: 9px; top: 0; width: 1.5px; height: 20px; }
.faq__item.open .faq__ic::after { transform: scaleY(0); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq__a p { padding-bottom: 26px; margin: 0; max-width: 74ch; font-size: 18px; line-height: 1.4; }
.faq__a strong { color: var(--dark); font-weight: 500; }

@media (max-width: 900px) {
  .vo-rates__head { grid-template-columns: 1fr; gap: 32px; }
  .policies { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 820px) {
  .rate { grid-template-columns: 1fr auto; gap: .4rem 1rem; }
  .rate__dates { grid-column: 1; order: 3; }
  .rate__extra { grid-column: 2; order: 4; }
}

/* Under-table note (matches live: tax / service charge / cleaning fee line). */
.vo-rates__tablenote { margin: 1.4rem 0 0; text-align: left; font-size: 18px; line-height: 1.4; color: #123536; }