/* legacy.css — styles the MIGRATED legacy content wrappers inside .content-card.
   Loaded AFTER main.css. Everything is scoped to .content-card so chrome is untouched.
   Legacy wrappers in use: .textandimg > .text, .imgvilla2, .imgvilla, .img1, .section, .clr */

/* ---------- (1) NO-UPSCALE: a legacy image never renders larger than its intrinsic
   (attribute) size; it only shrinks to fit. Never set width:100% on these. ---------- */
.content-card .textandimg img,
.content-card .imgvilla2 img,
.content-card .imgvilla img,
.content-card .img1 img,
.content-card .section img {
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md, 8px);
}

/* ---------- (2) TWO-UP desktop layout for the legacy float wrappers; single column
   at <=1024px. Images stay at intrinsic size (no upscaling) and centre in the cell. --- */
.content-card .textandimg { margin: var(--sp-4) 0; }
.content-card .textandimg::after { content: ""; display: block; clear: both; }
.content-card .imgvilla2,
.content-card .imgvilla,
.content-card .img1 {
  display: block;
  text-align: center;
  margin: var(--sp-3) 0 var(--sp-6);
}
.content-card .clr { clear: both; }
@media (min-width: 1025px) {
  .content-card .imgvilla2,
  .content-card .imgvilla {
    display: inline-block;
    vertical-align: top;
    max-width: calc(50% - var(--sp-4));
    margin: 0 var(--sp-3) var(--sp-6) 0;
  }
  /* STANDALONE LEAD (owner ruling, 2026-07-18): the lead/hero image is marked
     fetchpriority="high". When it is NOT a left/right text-wrap (no align attr) it is a
     standalone hero and must FILL the content column, not sit in the 50% two-up .imgvilla2
     wrapper above — that half-column cap (~363px) was the real defect the width= attribute
     masked. It still never upscales beyond native (max-width:100% + width:auto from §1).
     Text-wrap leads (align=left/right) are excluded and keep the two-up layout. */
  .content-card .imgvilla2:has(img[fetchpriority="high"]:not([align])) {
    display: block;
    max-width: 100%;
    margin: var(--sp-3) auto var(--sp-6);
    text-align: center;
  }
  .content-card .imgvilla2:has(img[fetchpriority="high"]:not([align])) .section {
    float: none;
    justify-content: center;
  }
  /* the legacy .section grid inside a wrapper lays its thumbnails out with gaps */
  .content-card .section {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
  }
}

/* ---------- (3) In-prose CTA links render as the gold .btn--cta button (exact look
   copied from main.css .btn/.btn--cta). Targets the inquiry/contact link families. --- */
.content-card p a[href*="inquiryform"],
.content-card p a[href*="Formulaire-de-reservation"],
.content-card p a[href*="contact-details"],
.content-card p a[href*="nous-contacter"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-2) var(--sp-5);
  margin: var(--sp-2) 0;
  border: 1px solid var(--c-btn-border);
  border-radius: var(--radius-btn);
  font: var(--fw-bold) var(--fs-base)/1.25 var(--font-sans);
  text-align: center;
  text-decoration: none;
  color: var(--c-deep);
  background: linear-gradient(180deg, #f7b165, var(--c-btn-book));
  box-shadow: 0 2px 5px rgba(207, 127, 40, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.content-card p a[href*="inquiryform"]:hover,
.content-card p a[href*="Formulaire-de-reservation"]:hover,
.content-card p a[href*="contact-details"]:hover,
.content-card p a[href*="nous-contacter"]:hover {
  color: var(--c-deep);
  background: linear-gradient(180deg, #f3a552, var(--c-btn-book-hover));
  box-shadow: 0 5px 12px rgba(207, 127, 40, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
}
@media (max-width: 1023px) {
  .content-card p a[href*="inquiryform"],
  .content-card p a[href*="Formulaire-de-reservation"],
  .content-card p a[href*="contact-details"],
  .content-card p a[href*="nous-contacter"] { font-size: var(--fs-btn-m); }
}

/* ---------- (4) Legacy content H1: gold accent rule (matching the .content-card h2
   treatment) + a little breathing room above (fixes the compact top padding). ---------- */
.content-card > h1:first-child { margin-top: var(--sp-1); }
.content-card > h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--c-gold);
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-2);
  opacity: 0.8;
}
.content-card > h1.text-center::after { margin-left: auto; margin-right: auto; }

/* ============================================================
   7h — mobile horizontal-overflow / menu layout-shift fix
   Legacy full-width decorative dividers (menu_border.webp) carried a fixed
   width:615px that overflowed <615px viewports; opening the scroll-locked
   hamburger then left the page shifted. Cap the legacy widths + guard the body.
   ============================================================ */
html, body { overflow-x: clip; }  /* V3: clip (not hidden) so it does NOT create a scroll container that kills position:sticky on .shell__sidebar */
.content-card [style*="menu_border"],
.content-card [style*="width:615"],
.content-card [style*="width: 615"] { max-width: 100% !important; background-size: contain; }
@media (max-width: 1023px) {
  /* any other legacy fixed pixel width inside content must not exceed the column */
  .content-card [style*="width:5"],
  .content-card [style*="width:6"],
  .content-card [style*="width:7"],
  .content-card [style*="width:8"],
  .content-card [style*="width:9"] { max-width: 100% !important; }
}