/* v27–v29 composition (DESIGN.md "Version 27" and "Version 29"): rental as a list beside one large
   photograph, certificates on a sage field, contacts as a directory of full-width plates. No drawn props
   (gates, nails, strings, screws, hazard stripes): user decision 2026-10-01. Loaded before motion.css. */

/* ── Rental: a list and one large photograph ─────────────────────────────────── */
.rental-layout { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 72px; align-items: start; }
.space-list { gap: 4px; }
.space, .space[open] { background: transparent; border-radius: 0; padding-inline: 0; color: var(--ink); }
.space summary, .space:first-child summary { min-height: 82px; padding-block: 16px; font-size: clamp(25px, 2.3vw, 34px); font-weight: 500; line-height: 1.15; }
.space[open] summary { color: var(--wine); }
.space-name { gap: 20px; }
.space summary > .icon { background: #e2e8e0; color: var(--ink); }
.space[open] summary > .icon { background: var(--wine); color: #fff; }
.space-body { padding: 0 0 28px 62px; }
.space-body > p { color: var(--muted); font-size: 15px; max-width: 430px; }
.space .text-button { color: var(--wine); }
@media (hover: hover) and (pointer: fine) {
  .space:not([open]):hover { background: transparent; }
  .space[open] summary:hover { color: var(--wine-dark); }
}

.rental-photo { min-height: 640px; border-radius: 24px; background: var(--deep); }
.rental-photo .photo-window { position: absolute; inset: 0; overflow: hidden; }
.rental-photo .photo-window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rental-photo figcaption { inset: auto auto 18px 18px; max-width: calc(100% - 36px); min-height: 0; height: auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px;
  padding: 8px 18px 8px 8px; border-radius: 14px; background: #f6f7f5f0; backdrop-filter: blur(12px); color: var(--ink); z-index: 2; }
.rental-photo figcaption #space-caption { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: normal; color: var(--ink); }

/* ── Certificates: framed originals on a sage field ────────────────────────────────────── */
.certificates.shell { width: auto; margin-inline: 24px; padding: 96px max(32px, calc((100% - 1488px) / 2)); border-radius: 32px; background: var(--sage); }
.certificates .section-heading > p, .certificate-card p { color: #45514c; }
.certificate-grid { gap: 40px; align-items: start; }
.certificate-card > a, .certificate-card:hover > a { position: relative; background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
.certificate-card img { height: 230px; filter: drop-shadow(0 20px 16px #1f302a40) drop-shadow(0 3px 3px #1f302a33); }
.certificate-year { top: auto; bottom: -12px; left: 50%; transform: translateX(-50%); background: var(--paper); }
.certificate-card > div { padding-top: 30px; text-align: center; }

/* ── FAQ sits on the open paper between the wall and the board ─────────────────────────── */
.faq-section { background: transparent; border-radius: 0; padding: 104px 0; }
.faq-list details { background: #fff; }

/* ── Contacts: a directory of full-width plates; the rental contact first, its mobile number highlighted ── */
.company-contact-grid { grid-template-columns: 1fr; row-gap: 14px; }
.company-contact-card { display: grid; grid-template-columns: 210px minmax(0, 1.1fr) minmax(0, .9fr); grid-template-rows: auto 1fr; grid-row: auto; column-gap: 40px; align-items: start;
  padding: 36px 44px; border-radius: 22px; }
.company-contact-card.is-rental { padding-block: 44px; }
.company-contact-card > .contact-card-label { grid-column: 1; grid-row: 1 / span 2; margin: 0; padding-top: 9px; }
.company-contact-card > h3 { grid-column: 2; grid-row: 1; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; }
.company-contact-card.is-rental > h3 { font-size: clamp(30px, 3vw, 44px); }
.company-contact-card > h3 + p { grid-column: 2; grid-row: 2; margin-top: 10px; font-size: 14px; }
.company-contact-card > dl, .company-contact-card > .plate-data { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding-top: 6px; font-size: 15px; }
.plate-data dl { margin: 22px 0 0; font-size: 15px; }
.main-phone { display: inline-flex; align-items: center; gap: 16px; color: #fff; font: 500 clamp(30px, 2.9vw, 42px)/1.05 'Archivo', sans-serif; letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.main-phone small { display: block; margin-bottom: 6px; font: 600 11px/1 'Archivo', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #f0dce2; }
.main-phone-icon { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fff; color: var(--wine); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.main-phone-icon .icon { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) { .main-phone:hover .main-phone-icon { transform: rotate(-14deg) scale(1.08); } }

@media (max-width: 1100px) {
  .rental-layout { gap: 44px; }
  .company-contact-card { grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 28px; padding: 30px 32px; }
}
@media (max-width: 1000px) {
  .company-contact-card, .company-contact-card.is-rental { display: block; padding: 30px 28px; }
  .company-contact-card > h3 { margin-top: 12px; }
  .company-contact-card > dl, .company-contact-card > .plate-data { margin-top: 22px; }
}
@media (max-width: 900px) {
  .rental-layout { grid-template-columns: 1fr; gap: 26px; }
  .rental-photo { order: -1; min-height: 0; aspect-ratio: 4 / 3.3; }
  .certificate-card:nth-child(n) { margin-top: 0; }
}
@media (max-width: 760px) {
  .certificates.shell { margin-inline: 16px; padding: 64px 24px; border-radius: 24px; }
  .faq-section { padding-block: 72px; }
}
@media (max-width: 520px) {
  .space summary, .space:first-child summary { min-height: 70px; font-size: 21px; }
  .space-name { gap: 14px; }
  .space-body { padding-left: 44px; }
  .rental-photo { aspect-ratio: auto; height: 360px; border-radius: 18px; }
  .main-phone { font-size: 28px; gap: 12px; }
  .main-phone-icon { width: 48px; height: 48px; }
  .rental-photo figcaption { inset: auto auto 12px 12px; max-width: calc(100% - 24px); padding: 6px 12px 6px 6px; gap: 10px; }
  .certificates.shell { margin-inline: 10px; padding: 56px 18px; }
  .certificate-grid { gap: 48px; }
  .certificate-card { display: block; }
  .certificate-card img { height: 210px; }
  .certificate-card > div { padding-top: 28px; }
  .company-contact-card, .company-contact-card.is-rental { padding: 26px 22px; }
}