/* Blue Wine Jazz: approved offer-page layout, 28 October 2026.
   Existing smartphone components remain the foundation, including landscape. */
@media(min-width:1000px), (min-width:761px) and (min-height:501px){
 .offer-preview{--max-w:1400px;--px:40px}
 .offer-preview .container{max-width:1400px}
 .offer-preview .offer-hero{padding:132px 0 76px}
 .offer-preview .breadcrumb{margin-bottom:40px}
 /* Keep the headline in the first screen; give the photo the wider column. */
 .offer-preview .offer-hero-grid{grid-template-columns:5fr 8fr;gap:56px;align-items:center}
 .offer-preview .offer-hero-content{display:block}
 .offer-preview .offer-hero-grid>figure{width:100%;max-width:none}
 .offer-preview .offer-hero h1{
  font-size:clamp(38px,3.5vw,52px);font-weight:500;line-height:1.08;
  letter-spacing:-.045em;max-width:19ch;margin-bottom:24px;
 }
 .offer-preview .offer-lead{font-size:18px;line-height:1.65;max-width:45ch}
 .offer-preview .offer-actions{margin-top:28px}
 .offer-preview .offer-hero figure img{height:auto;aspect-ratio:auto;object-fit:contain}

 .offer-preview .offer-section{padding-block:94px}
 .offer-preview .offer-layout{grid-template-columns:4fr 8fr;gap:76px;align-items:start}
 .offer-preview .offer-section h2{
  font-size:clamp(38px,3.8vw,55px);font-weight:500;line-height:1.08;
  letter-spacing:-.045em;max-width:16ch;margin-bottom:26px;
 }
 .offer-preview .offer-section .section-label{margin-bottom:22px}
 .offer-preview .offer-section h3{font-weight:500}
 .offer-preview .offer-copy>p{font-size:16px;line-height:1.75}

 /* Practical content stays compact and in one clear reading order. */
 .offer-preview .offer-timeline{gap:30px}
 .offer-preview .offer-timeline li{grid-template-columns:132px minmax(0,1fr);gap:24px}
 .offer-preview .offer-timeline h3{font-size:22px;margin-bottom:10px}
 .offer-preview .offer-timeline p{font-size:16px;line-height:1.65}
 .offer-preview .offer-programme .offer-note{margin-top:28px;margin-left:156px;max-width:62ch}
 .offer-preview .offer-video video{display:block;width:100%;height:auto;aspect-ratio:16/9}

 /* A shared heading above two equal, full-width formation columns. */
 .offer-preview #besetzung{background:var(--bg)}
 .offer-preview #besetzung>.offer-layout{grid-template-columns:1fr;gap:46px}
 .offer-preview #besetzung>.offer-layout>header{
  display:grid;grid-template-columns:1fr 1fr;column-gap:72px;align-items:end;
 }
 .offer-preview #besetzung .section-label{grid-column:1/-1}
 .offer-preview #besetzung h2{grid-column:1;max-width:none;margin:0}
 .offer-preview #besetzung .offer-formation-advice{
  grid-column:2;margin:0;max-width:48ch;font-size:16px;line-height:1.65;
 }
 .offer-preview #besetzung .offer-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:72px}
 .offer-preview .offer-formation{min-width:0}
 .offer-preview .offer-formation>img,
 .offer-preview .offer-formation-media{width:100%;height:auto;aspect-ratio:auto;margin-bottom:26px}
 .offer-preview .offer-formation .offer-formation-media img{
  width:100%;height:auto;aspect-ratio:auto;object-fit:contain;margin:0;
 }
 .offer-preview .offer-formation>img{object-fit:contain}
 .offer-preview .offer-formation h3{
  font-size:36px;font-weight:500;line-height:1.15;letter-spacing:-.035em;
  margin-bottom:10px;gap:14px;
 }
 .offer-preview .offer-formation .formation-instruments{
  font-size:14px;line-height:1.7;font-style:italic;margin-bottom:20px;
 }
 .offer-preview .offer-formation p:not(.formation-instruments):not(.space){
  font-size:17px;line-height:1.7;max-width:48ch;
 }
 .offer-preview .offer-formation .space{font-size:14px;line-height:1.65;margin-top:22px}

 /* The wedding portrait and the KKL photo keep their original proportions. */
 .offer-preview .offer-proof .offer-case-layout{
  grid-template-columns:5fr 7fr;column-gap:80px;row-gap:28px;
 }
 .offer-preview .offer-proof .offer-case-layout>header{grid-column:2;grid-row:1}
 .offer-preview .offer-proof .offer-case-layout>.offer-case-photo{grid-column:1;grid-row:1/3;margin:0}
 .offer-preview .offer-proof .offer-case-layout>.offer-copy{grid-column:2;grid-row:2}
 .offer-preview .offer-case-photo img{width:100%;height:auto;object-fit:contain}
 .offer-preview .offer-proof h2{max-width:16ch;margin-bottom:0}
 .offer-preview .offer-proof .offer-case-brief{font-size:17px;line-height:1.75;max-width:54ch;margin-bottom:16px}
 .offer-preview .offer-proof .offer-copy>h3{font-size:23px;line-height:1.3;margin-top:28px;margin-bottom:12px}
 .offer-preview .offer-case-link{font-size:14px;margin-bottom:30px}
 .offer-preview .offer-proof .offer-quote{
  margin:0;padding-top:26px;border-top:1px solid var(--border);
 }
 .offer-preview .offer-proof .offer-quote-mark{height:30px;margin-bottom:8px;font-size:62px;line-height:1}
 .offer-preview .offer-proof .offer-quote p{
  font-size:25px;font-weight:400;line-height:1.5;letter-spacing:-.02em;max-width:45ch;
 }
 .offer-preview .offer-proof .offer-wedding-quote p{font-size:32px;line-height:1.35;max-width:30ch}
 .offer-preview .offer-proof .offer-quote footer{margin-top:16px;font-size:13px;line-height:1.65}
 .offer-preview .offer-proof .offer-quote cite{font-weight:500;color:var(--text)}
 .offer-preview .offer-proof .offer-quote footer span{margin-top:2px}
 .offer-preview .offer-proof .offer-proof-places{margin-top:54px}
 /* Keep the two reference labels on the same baseline at every larger width. */
 .offer-preview .offer-proof .offer-proof-places-heading .section-label{margin:0}

 /* A clear price example rather than a new package or pricing card. */
 .offer-preview .offer-pricing{background:var(--bg)}
 .offer-preview .offer-pricing .offer-copy{max-width:62ch}
 .offer-preview .offer-pricing .offer-budget-line{
  font-size:21px;font-weight:400;line-height:1.5;text-wrap:initial;margin:0;
 }
 .offer-preview .offer-budget-line strong{
  display:block;font-size:clamp(46px,4.5vw,64px);font-weight:400;
  letter-spacing:-.045em;line-height:1.08;margin-bottom:16px;
 }
 .offer-preview .offer-pricing .offer-copy>p:not(.offer-budget-line){font-size:16px;line-height:1.75;margin-top:24px}
 .offer-preview .offer-pricing .offer-price-enquiry{margin-top:24px}
 .offer-preview .offer-faq summary{font-size:18px;font-weight:500;line-height:1.5;padding-block:22px}
 .offer-preview .offer-contact .offer-copy>p{font-size:18px;line-height:1.65;max-width:45ch}
}

/* Tablet keeps the new typography and formation grid without narrow text columns. */
@media(min-width:761px) and (max-width:999px) and (min-height:501px){
 .offer-preview{--px:28px}
 .offer-preview .container{padding-inline:28px}
 .offer-preview .offer-hero{padding:118px 0 60px}
 .offer-preview .breadcrumb{margin-bottom:30px}
 .offer-preview .offer-hero-grid{grid-template-columns:1fr;gap:32px}
 .offer-preview .offer-hero-content{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:start}
 .offer-preview .offer-hero h1{font-size:36px;margin-bottom:0}
 .offer-preview .offer-hero .offer-actions{margin-top:22px}
 .offer-preview .offer-lead{font-size:16px}
 .offer-preview .offer-section{padding-block:72px}
 .offer-preview .offer-layout{grid-template-columns:1fr;gap:30px}
 .offer-preview .offer-section h2{font-size:38px;max-width:22ch;margin-bottom:0}
 .offer-preview .offer-section .section-label{margin-bottom:18px}
 .offer-preview .offer-timeline{gap:28px}
 .offer-preview .offer-timeline h3{font-size:21px}
 .offer-preview #besetzung>.offer-layout{gap:34px}
 .offer-preview #besetzung>.offer-layout>header{column-gap:32px}
 .offer-preview #besetzung .offer-formation-advice{font-size:15px}
 .offer-preview #besetzung .offer-columns{gap:32px}
 .offer-preview .offer-formation h3{font-size:32px}
 .offer-preview .offer-formation p:not(.formation-instruments):not(.space){font-size:16px}
 .offer-preview .offer-proof .offer-case-layout{grid-template-columns:5fr 7fr;column-gap:32px;row-gap:24px}
 .offer-preview .offer-proof h2{font-size:35px}
 .offer-preview .offer-proof .offer-case-brief{font-size:16px;line-height:1.7}
 .offer-preview .offer-proof .offer-copy>h3{font-size:21px}
 .offer-preview .offer-proof .offer-quote p{font-size:22px}
 .offer-preview .offer-proof .offer-wedding-quote p{font-size:27px}
 .offer-preview .offer-pricing .offer-layout{grid-template-columns:1fr 1.5fr;gap:36px}
 .offer-preview .offer-budget-line strong{font-size:52px}
 .offer-preview .offer-pricing .offer-budget-line{font-size:19px}
 .offer-preview .offer-contact .offer-copy>p{font-size:17px}
}

@media(min-width:1000px) and (max-width:1199px){
 .offer-preview .offer-hero{padding-top:126px}
 .offer-preview .offer-hero-grid{column-gap:40px}
 .offer-preview .offer-hero h1{font-size:38px}
 .offer-preview .offer-lead{font-size:17px}
 .offer-preview .offer-section{padding-block:76px}
 .offer-preview .offer-layout{grid-template-columns:1fr 1.8fr;column-gap:44px}
 .offer-preview .offer-section h2{font-size:39px}
 .offer-preview .offer-timeline li{grid-template-columns:120px minmax(0,1fr);gap:20px}
 .offer-preview .offer-programme .offer-note{margin-left:140px}
 .offer-preview #besetzung>.offer-layout>header,
 .offer-preview #besetzung .offer-columns{column-gap:44px}
 .offer-preview .offer-formation h3{font-size:33px}
 .offer-preview .offer-proof .offer-case-layout{grid-template-columns:5fr 7fr;column-gap:44px}
 .offer-preview .offer-proof .offer-case-brief{font-size:16px}
 .offer-preview .offer-proof .offer-quote p{font-size:23px}
 .offer-preview .offer-proof .offer-wedding-quote p{font-size:29px}
}

/* Tablet formation intro: title, advice, then the two images. */
@media(min-width:761px) and (max-width:1199px) and (min-height:501px){
 .offer-preview #besetzung>.offer-layout>header{display:block}
 .offer-preview #besetzung h2{max-width:22ch}
 .offer-preview #besetzung .offer-formation-advice{max-width:62ch;margin-top:20px}
}