/*
 * Strona „O nas” (2026-10-31): szablon page-templates/ta-about.php.
 * Sekcje są blokami edytora z klasami ta-about-*; układ wg sklepdev.regalia.eu/o-nas/.
 * Mobile first, progi kontenera 700 i 1200 px jak w Pomocy (ta-help.css).
 */
.ta-about { container: ta-about / inline-size; width: 100%; font-family: var(--ta-font); color: var(--ta-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.ta-about *, .ta-about *::before, .ta-about *::after { box-sizing: border-box; }
.ta-about a:focus-visible { outline: 2px solid var(--ta-green); outline-offset: 2px; }

/* Ścieżka (ta_help_crumbs) */
.ta-about .ta-help__crumbs { background: var(--ta-cream); }
.ta-about .ta-help__crumbs-in { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 12px 16px; font: 400 12.5px/1.6 var(--ta-font); color: var(--ta-ink-muted); }
.ta-about .ta-help__crumbs a { color: var(--ta-ink-muted); text-decoration: none; transition: color .2s ease; }
.ta-about .ta-help__crumbs a:hover { color: var(--ta-rust); }
.ta-about .ta-help__crumbs [aria-current] { color: var(--ta-ink); }

/* Treść */
.ta-about .ta-about__body { width: 100%; max-width: 1440px; margin: 0 auto; padding: 32px 16px 72px; }
.ta-about .wp-block-group { margin: 0; }
.ta-about p { margin: 0; }
.ta-about figure.wp-block-image { margin: 0; overflow: hidden; border-radius: 10px; background: var(--ta-thumb); }
/* Odstępy między sekcjami: selektor div... ma tę samą wagę co figure.wp-block-image i stoi po nim, więc wygrywa także dla zdjęć. */
.ta-about div.ta-about__body > * { margin-top: 0; margin-bottom: 0; }
.ta-about div.ta-about__body > * + * { margin-top: 56px; }
.ta-about figure.wp-block-image img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }

.ta-about .ta-about-eyebrow { font: 700 12px/1.5 var(--ta-font); letter-spacing: .18em; text-transform: uppercase; color: var(--ta-rust); }
.ta-about .ta-about-h1 { margin: 12px 0 0; font: 300 38px/1.08 var(--ta-font); letter-spacing: -.015em; text-transform: none; color: var(--ta-ink); text-wrap: balance; }
.ta-about .ta-about-lead { max-width: 480px; margin-top: 16px; font: 400 16px/1.7 var(--ta-font); color: var(--ta-ink-muted); text-wrap: pretty; }

/* A. Hero: tytuł i dwa zdjęcia */
.ta-about .ta-about-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.ta-about .ta-about-hero__txt { grid-column: 1 / -1; padding-bottom: 12px; }
.ta-about .ta-about-hero__img1 { aspect-ratio: 2 / 3; }
.ta-about .ta-about-hero__img2 { aspect-ratio: 2 / 3; margin-top: 32px !important; }

/* B. Historia: hasło i opis */
.ta-about .ta-about-intro__cols { display: grid; gap: 16px; margin-top: 14px; }
.ta-about .ta-about-statement { font: 300 24px/1.35 var(--ta-font); letter-spacing: -.01em; color: var(--ta-ink); text-wrap: balance; }
.ta-about .ta-about-text, .ta-about .ta-about-split__left p { font: 400 16px/1.75 var(--ta-font); color: var(--ta-ink-muted); text-wrap: pretty; }

/* C, F. Zdjęcia na całą szerokość */
.ta-about .ta-about-wide { aspect-ratio: 4 / 3; }

/* D. Dwie kolumny: tekst + kuchnia, pytanie + wnętrze + podpis */
.ta-about .ta-about-split { display: grid; gap: 48px; }
.ta-about .ta-about-split__left > * + * { margin-top: 16px; }
.ta-about .ta-about-split__left .ta-about-more { margin-top: 24px; }
.ta-about .ta-about-more a { font: 500 13px/1.5 var(--ta-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ta-green); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color .2s ease; }
.ta-about .ta-about-more a:hover { color: var(--ta-rust); }
.ta-about .ta-about-split__left .ta-about-split__img { aspect-ratio: 3 / 2; margin-top: 32px; }
.ta-about .ta-about-split__right { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ta-about .ta-about-quote { max-width: 420px; font: 500 17px/1.5 var(--ta-font); color: var(--ta-ink); text-wrap: balance; }
.ta-about .ta-about-portrait { width: min(100%, 360px); aspect-ratio: 4 / 5; margin-top: 28px !important; }
.ta-about .ta-about-portrait img { object-position: 35% 50%; }
.ta-about figure.ta-about-sign { width: 200px; margin-top: 24px !important; overflow: visible; border-radius: 0; background: none; }
.ta-about figure.ta-about-sign img { height: auto; object-fit: contain; }
.ta-about .ta-about-sign figcaption { margin: 8px 0 0; font: 400 13px/1.5 var(--ta-font); color: var(--ta-ink-muted); text-align: center; }

/* E. Pas z pytaniem i przyciskiem */
.ta-about .ta-about-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 22px; border-radius: 10px; background: var(--ta-cream); }
.ta-about .ta-about-cta__q { max-width: 760px; font: 300 22px/1.35 var(--ta-font); letter-spacing: -.01em; color: var(--ta-ink); text-wrap: balance; }
.ta-about .ta-about-cta .wp-block-buttons { margin: 0; }
.ta-about .ta-about-cta .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 0 26px; border: 0; border-radius: var(--ta-radius-sm); background: var(--ta-green); font: 500 13px/1.2 var(--ta-font); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--ta-white); transition: background-color .2s ease; }
.ta-about .ta-about-cta .wp-block-button__link:hover { background: var(--ta-green-hover); color: var(--ta-white); }

/* G. Historia firmy (długi tekst) */
.ta-about .ta-about-story { max-width: 820px; margin-left: auto !important; margin-right: auto !important; scroll-margin-top: 120px; }
.ta-about .ta-about-story h2 { margin: 12px 0 24px; font: 300 28px/1.2 var(--ta-font); letter-spacing: -.01em; text-transform: none; color: var(--ta-ink); text-wrap: balance; }
.ta-about .ta-about-story p, .ta-about .ta-about-story li { font: 400 16px/1.8 var(--ta-font); color: var(--ta-ink-soft); text-wrap: pretty; }
.ta-about .ta-about-story p + p { margin-top: 18px; }
.ta-about .ta-about-story ul { margin: 14px 0 0 20px; padding: 0; }
.ta-about .ta-about-story li + li { margin-top: 8px; }
.ta-about .ta-about-story a { color: var(--ta-green); text-decoration: underline; text-underline-offset: 3px; }
.ta-about .ta-about-story a:hover { color: var(--ta-rust); }
.ta-about .ta-about-story p.ta-about-eyebrow { font: 700 12px/1.5 var(--ta-font); letter-spacing: .18em; text-transform: uppercase; color: var(--ta-rust); }

@container ta-about (min-width: 700px) {
  .ta-about .ta-help__crumbs-in, .ta-about .ta-about__body { padding-left: 32px; padding-right: 32px; }
  .ta-about .ta-about-h1 { font-size: 44px; }
  .ta-about .ta-about-hero { gap: 20px; }
  .ta-about .ta-about-intro__cols { grid-template-columns: 1fr 1fr; gap: 40px; }
  .ta-about .ta-about-wide { aspect-ratio: 2 / 1; }
  .ta-about .ta-about-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding: 36px 40px; }
  .ta-about .ta-about-cta .wp-block-buttons { flex: none; }
}
@container ta-about (min-width: 1000px) {
  .ta-about .ta-about-hero { grid-template-columns: 1.2fr .9fr .9fr; gap: 32px; align-items: center; }
  .ta-about .ta-about-hero__txt { grid-column: auto; padding-bottom: 0; }
  .ta-about .ta-about-hero__img2 { aspect-ratio: 3 / 4; align-self: start; margin-top: 0 !important; }
  .ta-about .ta-about-split { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .ta-about .ta-about-split__left p { max-width: 480px; }
  .ta-about .ta-about-split__right { padding-top: 8px; }
}
@container ta-about (min-width: 1200px) {
  .ta-about .ta-help__crumbs-in { max-width: 1440px; margin: 0 auto; gap: 10px; padding: 20px 40px; font-size: 13px; line-height: 1.5; }
  .ta-about .ta-about__body { padding: 48px 40px 112px; }
  .ta-about div.ta-about__body > * + * { margin-top: 96px; }
  .ta-about .ta-about-h1 { font-size: 56px; }
  .ta-about .ta-about-lead { font-size: 17px; }
  .ta-about .ta-about-statement { font-size: 30px; }
  .ta-about .ta-about-cta__q { font-size: 26px; }
  .ta-about .ta-about-story h2 { font-size: 36px; }
  .ta-about .ta-about-story p, .ta-about .ta-about-story li { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .ta-about * { transition: none !important; }
}