/* Mila Stays Component System — Point 2C
   Uses tokens from mila-stays.design-tokens.v2.css.
   Migration rule: component classes add invariants, not redesigns. */

/* Header contract — geometry remains in the legacy baseline while brand roles come from tokens. */
.ms-header{--ms-header-bg:rgba(17,16,14,.96);font-family:var(--ms-font-body);}
.ms-header .brand-stack strong{font-family:var(--ms-font-display);}
.ms-header .main-nav,.ms-header .lang-switch{font-family:var(--ms-font-body);}

/* Buttons and text CTAs */
.ms-button{font-family:var(--ms-font-body);border-radius:var(--ms-radius-pill);}
.ms-text-link{font-family:var(--ms-font-body);}

/* My Story is a single component across BG/EN + desktop/mobile. */
.ms-story-title{
  font-family:var(--ms-font-script)!important;
  font-weight:400!important;
  font-style:normal!important;
  color:var(--ms-color-brown)!important;
  letter-spacing:.01em!important;
}
@media (min-width:981px){
  .ms-story-title{font-size:clamp(46px,4.2vw,56px)!important;line-height:1.02!important;}
}
@media (max-width:620px){
  .ms-story-photo{width:min(205px,58vw)!important;margin-bottom:var(--ms-space-2)!important;}
  .ms-story-title{font-size:clamp(40px,11vw,48px)!important;line-height:1.02!important;}
}

/* Article image contract — full composition, orientation-based scale. */
.ms-article-media{height:auto!important;max-height:none!important;aspect-ratio:auto!important;overflow:visible!important;background:transparent!important;}
.ms-article-media img{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;margin-left:auto!important;margin-right:auto!important;}
@media (min-width:981px){
  .article-hero-media.article-orientation-landscape{width:min(32vw,var(--ms-hero-landscape-d))!important;max-width:var(--ms-hero-landscape-d)!important;}
  .article-hero-media.article-orientation-panorama{width:min(34vw,var(--ms-hero-panorama-d))!important;max-width:var(--ms-hero-panorama-d)!important;}
  .article-hero-media.article-orientation-portrait{width:min(25vw,var(--ms-hero-portrait-d))!important;max-width:var(--ms-hero-portrait-d)!important;}
  .article-hero-media.article-orientation-square{width:min(28vw,var(--ms-hero-square-d))!important;max-width:var(--ms-hero-square-d)!important;}
  .article-inline-media.article-orientation-landscape{width:var(--ms-inline-landscape-d)!important;max-width:min(100%,var(--ms-inline-landscape-d))!important;}
  .article-inline-media.article-orientation-panorama{width:var(--ms-inline-panorama-d)!important;max-width:min(100%,var(--ms-inline-panorama-d))!important;}
  .article-inline-media.article-orientation-portrait{width:var(--ms-inline-portrait-d)!important;max-width:min(100%,var(--ms-inline-portrait-d))!important;}
  .article-inline-media.article-orientation-square{width:var(--ms-inline-square-d)!important;max-width:min(100%,var(--ms-inline-square-d))!important;}
  .article-inline-media.article-size-portrait-compact{width:var(--ms-inline-portrait-compact-d)!important;max-width:min(100%,var(--ms-inline-portrait-compact-d))!important;}
  .article-inline-media.article-size-square-compact{width:var(--ms-inline-square-compact-d)!important;max-width:min(100%,var(--ms-inline-square-compact-d))!important;}
}
@media (min-width:621px) and (max-width:980px){
  .article-hero-media.article-orientation-landscape{width:min(78vw,var(--ms-hero-landscape-t))!important;max-width:var(--ms-hero-landscape-t)!important;}
  .article-hero-media.article-orientation-panorama{width:min(82vw,var(--ms-hero-panorama-t))!important;max-width:var(--ms-hero-panorama-t)!important;}
  .article-hero-media.article-orientation-portrait{width:min(66vw,var(--ms-hero-portrait-t))!important;max-width:var(--ms-hero-portrait-t)!important;}
  .article-hero-media.article-orientation-square{width:min(70vw,var(--ms-hero-square-t))!important;max-width:var(--ms-hero-square-t)!important;}
  .article-inline-media.article-orientation-landscape{width:min(82vw,var(--ms-inline-landscape-t))!important;max-width:var(--ms-inline-landscape-t)!important;}
  .article-inline-media.article-orientation-panorama{width:min(86vw,var(--ms-inline-panorama-t))!important;max-width:var(--ms-inline-panorama-t)!important;}
  .article-inline-media.article-orientation-portrait{width:min(68vw,var(--ms-inline-portrait-t))!important;max-width:var(--ms-inline-portrait-t)!important;}
  .article-inline-media.article-orientation-square{width:min(74vw,var(--ms-inline-square-t))!important;max-width:var(--ms-inline-square-t)!important;}
  .article-inline-media.article-size-portrait-compact{width:min(66vw,var(--ms-inline-portrait-compact-t))!important;max-width:var(--ms-inline-portrait-compact-t)!important;}
  .article-inline-media.article-size-square-compact{width:min(72vw,var(--ms-inline-square-compact-t))!important;max-width:var(--ms-inline-square-compact-t)!important;}
}
@media (max-width:620px){
  .article-hero-media.article-orientation-landscape{width:min(84vw,var(--ms-hero-landscape-m))!important;max-width:var(--ms-hero-landscape-m)!important;}
  .article-hero-media.article-orientation-panorama{width:min(88vw,var(--ms-hero-panorama-m))!important;max-width:var(--ms-hero-panorama-m)!important;}
  .article-hero-media.article-orientation-portrait{width:min(76vw,var(--ms-hero-portrait-m))!important;max-width:var(--ms-hero-portrait-m)!important;}
  .article-hero-media.article-orientation-square{width:min(80vw,var(--ms-hero-square-m))!important;max-width:var(--ms-hero-square-m)!important;}
  .article-inline-media.article-orientation-landscape{width:min(92vw,var(--ms-inline-landscape-m))!important;max-width:var(--ms-inline-landscape-m)!important;}
  .article-inline-media.article-orientation-panorama{width:min(94vw,var(--ms-inline-panorama-m))!important;max-width:var(--ms-inline-panorama-m)!important;}
  .article-inline-media.article-orientation-portrait{width:min(84vw,var(--ms-inline-portrait-m))!important;max-width:var(--ms-inline-portrait-m)!important;}
  .article-inline-media.article-orientation-square{width:min(88vw,var(--ms-inline-square-m))!important;max-width:var(--ms-inline-square-m)!important;}
  .article-inline-media.article-size-portrait-compact{width:min(78vw,var(--ms-inline-portrait-compact-m))!important;max-width:var(--ms-inline-portrait-compact-m)!important;}
  .article-inline-media.article-size-square-compact{width:min(84vw,var(--ms-inline-square-compact-m))!important;max-width:var(--ms-inline-square-compact-m)!important;}
}

/* Selected by Mila card contract: fixed card structure, complete image composition. */
.ms-card-journal .ms-card-media{background:var(--ms-color-cream)!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:10px!important;box-sizing:border-box!important;}
.ms-card-journal .ms-card-media img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;transform:none!important;}
.ms-card-journal:hover .ms-card-media img{transform:none!important;}
@media (max-width:620px){
  .ms-card-journal .ms-card-media{padding:var(--ms-space-2)!important;}
  .ms-card-journal .ms-card-media.card-orientation-landscape{height:var(--ms-card-media-landscape-m)!important;min-height:var(--ms-card-media-landscape-m)!important;}
  .ms-card-journal .ms-card-media.card-orientation-square{height:var(--ms-card-media-square-m)!important;min-height:var(--ms-card-media-square-m)!important;}
  .ms-card-journal .ms-card-media.card-orientation-portrait{height:var(--ms-card-media-portrait-m)!important;min-height:var(--ms-card-media-portrait-m)!important;}
}

/* Accordion contract — structure and state only; existing brand layout remains authoritative. */
.ms-accordion-card{border-radius:var(--ms-radius-lg);}
.ms-accordion-card .brand-level-more,.ms-accordion-card .brand-level-close{font-family:var(--ms-font-body);}

/* Gallery contract: full main image; thumbnails intentionally remain cropped for navigation. */
.ms-gallery .ms-gallery-main>img{object-fit:contain;object-position:center;}
.ms-gallery .ms-gallery-thumb>img{object-fit:cover;}

/* Home hero contract: type role only; existing positioning remains authoritative. */
.ms-hero h1{font-family:var(--ms-font-display);}


/* ============================================================
   Point 2D — Final Responsive System
   One geometry contract for BG/EN. No content or asset changes.
   ============================================================ */

/* Universal component safety */
.ms-header *, .ms-story *, .ms-article *, .ms-card-journal *, .ms-accordion-card *, .ms-gallery *{box-sizing:border-box;}
.ms-header a,.ms-header button,.ms-button,.ms-text-link{touch-action:manipulation;}
.ms-story,.ms-article,.ms-card-journal,.ms-accordion-card,.ms-gallery{min-width:0;}

/* My Story: one typographic identity at every viewport. */
.ms-story-title{
  font-family:var(--ms-font-script)!important;
  font-weight:400!important;
  font-style:normal!important;
  color:var(--ms-color-brown)!important;
  letter-spacing:.01em!important;
  text-wrap:balance;
}
.ms-story-photo img{display:block;width:100%;height:auto;object-fit:contain;object-position:center;}

/* Journal cards: same card, only the stacking changes. */
.ms-card-journal{min-width:0;}
.ms-card-journal .ms-card-body{min-width:0;}
.ms-card-journal .ms-card-media{background:var(--ms-color-cream)!important;}
.ms-card-journal .ms-card-media img{object-fit:contain!important;object-position:center!important;transform:none!important;}
.ms-card-journal:hover .ms-card-media img{transform:none!important;}

/* Editorial images: composition is always preserved. */
.ms-article-media,.ms-article-media img{aspect-ratio:auto!important;}
.ms-article-media{overflow:visible!important;}
.ms-article-media img{height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important;}

/* Galleries: full main frame, cropped thumbnails only as navigation previews. */
.ms-gallery .ms-gallery-main>img{object-fit:contain!important;object-position:center!important;}
.ms-gallery .ms-gallery-thumb>img{object-fit:cover!important;object-position:center!important;}

/* Desktop */
@media (min-width:981px){
  .ms-story-title{font-size:var(--ms-story-title-desktop)!important;line-height:1.02!important;}
  .ms-header .menu-toggle{min-width:var(--ms-touch-target);min-height:var(--ms-touch-target);}
  .ms-card-journal .ms-card-media{padding:10px!important;}
}

/* Tablet — preserve desktop reading hierarchy but collapse dense two-column components safely. */
@media (min-width:621px) and (max-width:980px){
  .ms-header .menu-toggle,.ms-header .lang{min-width:var(--ms-touch-target);min-height:var(--ms-touch-target);}
  .ms-story-title{font-size:clamp(42px,6vw,52px)!important;line-height:1.02!important;}
  .ms-card-journal .ms-card-media{padding:var(--ms-space-3)!important;}
  .ms-button{min-height:var(--ms-touch-target);}
}

/* Mobile */
@media (max-width:620px){
  .ms-header .menu-toggle,.ms-header .lang{min-width:var(--ms-touch-target);min-height:var(--ms-touch-target);}
  .ms-button{min-height:var(--ms-touch-target);}
  .ms-story-photo{width:min(var(--ms-story-photo-mobile),58vw)!important;max-width:var(--ms-story-photo-mobile)!important;margin-left:auto!important;margin-right:auto!important;margin-bottom:var(--ms-space-2)!important;}
  .ms-story-title{font-size:var(--ms-story-title-mobile)!important;line-height:1.02!important;}
  .ms-card-journal .ms-card-media{padding:var(--ms-space-2)!important;}
  .ms-card-journal .ms-card-media.card-orientation-landscape{height:var(--ms-card-media-landscape-m)!important;min-height:var(--ms-card-media-landscape-m)!important;}
  .ms-card-journal .ms-card-media.card-orientation-square{height:var(--ms-card-media-square-m)!important;min-height:var(--ms-card-media-square-m)!important;}
  .ms-card-journal .ms-card-media.card-orientation-portrait{height:var(--ms-card-media-portrait-m)!important;min-height:var(--ms-card-media-portrait-m)!important;}
  .ms-card-journal .ms-card-media img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;}
}

/* Accessibility: visible keyboard focus without changing pointer appearance. */
.ms-header a:focus-visible,.ms-header button:focus-visible,.ms-button:focus-visible,.ms-text-link:focus-visible,
.ms-card-journal a:focus-visible,.ms-accordion-card summary:focus-visible,.ms-gallery button:focus-visible{
  outline:2px solid var(--ms-color-gold);
  outline-offset:3px;
}


/* Mila Stays Point 3 — journey components */
.ms-journey-next{display:flex;flex-wrap:wrap;gap:var(--ms-space-3) var(--ms-space-5);align-items:center;margin-top:var(--ms-space-5);}
.ms-journey-link{font-size:0.98rem;white-space:normal;}
@media(max-width:620px){.ms-journey-next{gap:var(--ms-space-3);margin-top:var(--ms-space-4);}.ms-journey-link{font-size:0.95rem;}}


/* Mila Stays v141 — Point 4D contact roles */
#contact-owners,#contact-brand{scroll-margin-top:110px}
.contact-links .ms-contact-role{display:block;text-decoration:none;color:inherit}
.contact-links .ms-contact-role strong{overflow-wrap:anywhere}
.contact-links .ms-contact-role:focus-visible{outline:2px solid var(--ms-color-gold,#b58a3a);outline-offset:4px;border-radius:8px}
@media(max-width:700px){#contact-owners,#contact-brand{scroll-margin-top:88px}}

/* Mila Stays v142 — desktop-only contact role alignment.
   Keep Contact Mila and social/contact rows full width; align For Owners + Boutique Brand on one row.
   Mobile/tablet stacking remains unchanged. */
@media (min-width:901px){
  .contact-links{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:28px;
  }
  .contact-links>a:nth-child(1),
  .contact-links>a:nth-child(2),
  .contact-links>.contact-social-row{
    grid-column:1 / -1;
  }
  .contact-links>#contact-owners{grid-column:1;}
  .contact-links>#contact-brand{grid-column:2;}
}