/* ctc-layout.css v63 (2026-10-08) — consistent column widths, tidy phone top bar. Loaded after ctc-brand.css on every page. */

/* Text blocks inside a wide section sit in the centre, on the same column as the rest of the page */
.wrap>.narrow{margin-left:auto;margin-right:auto}

/* Price calculator: same centred column as the page text */
.ctcalc{margin-left:auto!important;margin-right:auto!important}

/* Phone top bar: one short line (order link + language switch) instead of four lines of small print */
@media (max-width:640px){
  .topbar .wrap>span:first-child{display:none}
  .topbar .wrap{gap:10px 14px!important;padding:6px 14px!important}
}

/* Long e-mail addresses never push the page sideways on phones */
main a[href^="mailto:"]{overflow-wrap:anywhere}

/* Wide tables: a visible hint that they scroll sideways on phones */
@media (max-width:640px){
  .tablescroll{position:relative;-webkit-overflow-scrolling:touch;box-shadow:inset -14px 0 12px -12px rgba(11,34,57,.25);border-radius:8px}
}

/* Desktop top bar stays on one line, full width as before */
@media (min-width:641px){.topbar .wrap{max-width:none!important}}

/* v65: sample packets show two pages (translation + certificate) — centred, not stretched into three columns */
@media (min-width:761px){.pk .pages:has(> figure:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,330px));justify-content:center;gap:22px}}
@media (min-width:821px){.packet:has(> .sheet:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,330px));justify-content:center}}
@media (min-width:1001px){.apogrid{grid-template-columns:repeat(4,1fr)}}

/* v66: every inner page gets the home-page photo behind its title block, faded so the text stays readable */
.pagehead{background:linear-gradient(90deg,#FCFAF6 0%,#FCFAF6 45%,rgba(252,250,246,.9) 60%,rgba(252,250,246,.5) 80%,rgba(252,250,246,.2) 100%),url(/images/brand/hero-1600.webp) 70% 55%/cover no-repeat,#FCFAF6!important;border-bottom:1px solid #EFE6D4!important;padding-bottom:48px!important}
.pagehead .answer{background:rgba(255,255,255,.82)!important;backdrop-filter:blur(2px)}
@media(max-width:860px){.pagehead{background:linear-gradient(180deg,rgba(252,250,246,.55) 0%,rgba(252,250,246,.93) 140px,#FCFAF6 260px),url(/images/brand/hero-1000.webp) 70% 0/100% auto no-repeat,#FCFAF6!important}}