/* Musikschule Böbingen — тема. Правила: docs/reference/OLIVERGAREIS_STANDARD.md, раздел 11 */

@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }

:root {
  --ivory: #F6F3EC;
  --ebony: #111111;
  --muted: #5E5A52;
  --felt: #7A1F2B;
  --line: rgba(17, 17, 17, .15);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  /* 11.2: целевые px образца */
  --gap: 6px;
  --pad: 20px;
  --sec: 84px;
  --sec2: 60px;
  --cols: 4;
  /* 11.1: шкала заголовков, линейно 375 → 1440 */
  --h1: clamp(34px, 21.3px + 3.38vw, 96px);
  --h2: clamp(28px, 15.3px + 3.38vw, 64px);
  --h3: clamp(22px, 17.8px + 1.13vw, 34px);
  --body: clamp(17px, 16.3px + .19vw, 20px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.87, 0, .13, 1);
}
@media (min-width: 768px) { :root { --pad: 28px; } }
@media (min-width: 992px) {
  :root {
    --cols: 12;
    --gap: .45vw;
    --pad: 2.78vw;
    --sec: min(11.2vw, 200px);
    --sec2: 6.7vw;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ebony);
  font: 400 var(--body)/1.55 var(--sans);
  overflow-wrap: break-word;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--felt); outline-offset: 2px; }

h1, h2, h3, .h1, .h2 {
  font-family: var(--serif);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin: 0;
  hyphens: auto;
  overflow-wrap: break-word;
}
h1, .h1 { font-size: var(--h1); line-height: .9; }
h2, .h2 { font-size: var(--h2); line-height: .92; }
h3 { font-size: var(--h3); line-height: 1; }
p { margin: 0 0 1em; }

.eyebrow { font: 500 12px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* сетка */
.wrap { padding-inline: var(--pad); }
.grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: var(--gap); row-gap: var(--gap); }
.section { padding-block: var(--sec); }
.section + .section { padding-top: 0; }

/* нотный стан: 5 линий, шаг 0.5rem */
.staff { height: calc(4 * .5rem + 1px); background: repeating-linear-gradient(to bottom, var(--ebony) 0 1px, transparent 1px .5rem); opacity: .35; }

/* шапка */
.site-header { position: absolute; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--pad); color: var(--ivory); }
.site-header.is-solid { position: relative; color: var(--ebony); border-bottom: 1px solid var(--line); }
.wordmark { font: 500 22px/1 var(--serif); letter-spacing: -.01em; text-decoration: none; }
.wordmark span { display: block; font: 400 10px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-top: 4px; }
.nav { display: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  background: var(--felt); color: #fff; text-decoration: none; font: 500 15px/1 var(--sans); border: 0; cursor: pointer;
  transition: background-color .2s;
}
.btn:hover { background: #5F1721; }
.btn--small { min-height: 44px; padding: 0 16px; font-size: 14px; }
@media (min-width: 992px) {
  .nav { display: flex; gap: 28px; align-items: center; font: 400 14px/1 var(--sans); }
  .nav a { text-decoration: none; }
}

/* наведение на ссылку: строка уходит вверх, новая снизу (7.1), только мышь и ≥992 */
.lnk { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.2; }
.lnk > span { display: inline-block; position: relative; }
.lnk > span::after { content: attr(data-t); position: absolute; left: 0; top: 110%; }
@media (hover: hover) and (min-width: 992px) {
  .lnk > span { transition: transform .45s var(--ease-out); }
  .lnk:hover > span { transform: translateY(-110%); }
}

/* первый экран */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: var(--ivory); background: var(--ebony); overflow: hidden; }
.hero picture, .hero img, .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,17,17,.72), rgba(17,17,17,.1) 55%, rgba(17,17,17,.35)); }
.hero__text { position: relative; z-index: 1; padding: 0 var(--pad) calc(var(--sec2) + 40px); }
.hero__title { font-size: clamp(44px, 26px + 4.8vw, 132px); line-height: .88; }
.hero__claim { margin-top: 18px; font: italic 500 clamp(24px, 19px + 1.3vw, 40px)/1 var(--serif); letter-spacing: .02em; }

/* приветствие */
.intro__text { grid-column: 1 / -1; font: 500 clamp(22px, 18px + 1vw, 34px)/1.3 var(--serif); }
@media (min-width: 992px) { .intro__text { grid-column: 3 / 11; } }

/* плитки кнопок главной */
.tiles { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
@media (min-width: 992px) { .tiles { grid-column: 3 / 11; } }
.tiles > li { border-bottom: 1px solid var(--line); }
.tiles a, .tiles summary { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 22px 0; text-decoration: none; font: 500 var(--h3)/1 var(--serif); text-transform: uppercase; letter-spacing: -.01em; cursor: pointer; }
.tiles small { font: 400 13px/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--muted); text-align: right; }
.tiles a:hover, .tiles summary:hover { color: var(--felt); }
.tiles summary { list-style: none; }
.tiles summary::-webkit-details-marker { display: none; }
.tiles summary::after { content: "+"; font: 400 var(--h3)/1 var(--sans); transition: transform .3s var(--ease-out); }
.tiles details[open] summary::after { transform: rotate(45deg); }
.tiles details ul { list-style: none; margin: 0 0 18px; padding: 0 0 0 18px; }
.tiles details ul a { padding: 12px 0; font-size: calc(var(--h3) * .78); border-top: 1px solid var(--line); }

/* шаблон инструмента (11.4) */
.instr__head { grid-column: 1 / -1; padding-top: calc(var(--sec2) * .6); }
.instr__head .eyebrow { margin-bottom: 14px; }
.instr__main { grid-column: 1 / -1; margin: var(--sec2) 0 0; aspect-ratio: 4 / 3; overflow: hidden; background: #E8E3D8; }
.instr__main img { width: 100%; height: 100%; object-fit: cover; }
.instr__text { grid-column: 1 / -1; margin-top: var(--sec2); }
.instr__row { grid-column: 1 / -1; display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; margin-top: var(--sec2); padding-bottom: 6px; }
.instr__row figure { flex: 0 0 82%; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; scroll-snap-align: start; background: #E8E3D8; }
.instr__row img { width: 100%; height: 100%; object-fit: cover; }
.instr__cta { grid-column: 1 / -1; margin-top: var(--sec2); }
@media (min-width: 992px) {
  .instr__main { aspect-ratio: 16 / 9; }
  .instr__text { grid-column: 4 / 11; max-width: 68ch; }
  .instr__row { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .instr__cta { grid-column: 4 / 11; }
}

/* клавиатура над подвалом */
.keys { height: 64px; width: 100%; display: block; }
.site-footer { background: var(--ebony); color: var(--ivory); padding: var(--sec2) var(--pad) 120px; }
.site-footer a { text-decoration: none; }
.site-footer .staff { background: repeating-linear-gradient(to bottom, var(--ivory) 0 1px, transparent 1px .5rem); margin: 28px 0; }
.footer__row { display: flex; flex-wrap: wrap; gap: 20px 32px; font-size: 14px; color: #CFC9BD; }

/* меню снизу (9, 11.3) */
.menu-btn {
  position: fixed; left: 50%; bottom: 16px; z-index: 40; min-width: 113px; min-height: 48px; padding: 0 22px;
  transform: translate(-50%, 140%); background: var(--ebony); color: var(--ivory); border: 0; font: 500 15px/1 var(--sans); cursor: pointer;
  transition: transform .45s var(--ease-out);
}
.menu-btn.is-shown, .menu-open .menu-btn { transform: translate(-50%, 0); }
.menu-panel {
  position: fixed; inset: auto 0 0; z-index: 30; max-height: 88svh; overflow-y: auto; background: var(--ebony); color: var(--ivory);
  padding: 28px var(--pad) 96px; transform: translateY(100%); transition: transform .6s var(--ease-io), visibility 0s .6s; visibility: hidden;
}
.menu-open .menu-panel { transform: none; visibility: visible; transition: transform .6s var(--ease-io); }
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(246,243,236,.15); text-decoration: none; font: 500 26px/1.05 var(--serif); text-transform: uppercase; }
.menu-panel .sub a { font-size: 19px; padding-left: 18px; }
@media (min-width: 992px) { .menu-btn, .menu-panel { display: none; } }

/* появление при входе в экран (11.7) */
.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; }

/* ===== WordPress ===== */
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { color: var(--felt); }
.instr__staff { margin-top: 20px; max-width: 240px; }
.page .tiles { margin-top: var(--sec2); }
.entry > * + * { margin-top: 1em; }
.entry a { color: var(--felt); }
.entry h2 { margin-top: 1.6em; font-size: var(--h3); }
.entry ul, .entry ol { padding-left: 1.2em; }

/* ряд фото = галерея в конце текста (11.4): лента на телефоне, 3–4 в строку с 992 */
.entry .wp-block-gallery { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; margin: var(--sec2) 0 0; padding: 0 0 6px; list-style: none; }
.entry .wp-block-gallery figure { flex: 0 0 82%; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; scroll-snap-align: start; background: #E8E3D8; }
.entry .wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; }
/* перекрываем ширины галереи из wp-block-library: ряд задаём сами */
.entry .wp-block-gallery.has-nested-images figure.wp-block-image { width: auto !important; margin: 0 !important; flex-grow: 0; }
.entry .wp-block-gallery.has-nested-images figure.wp-block-image img { height: 100% !important; }
.entry .wp-block-gallery.has-nested-images { flex-wrap: nowrap !important; align-items: stretch; }
@media (min-width: 992px) { .entry .wp-block-gallery.has-nested-images { display: grid !important; } }
@media (min-width: 992px) {
  .instr__text:has(.wp-block-gallery) { max-width: none; grid-column: 1 / -1; }
  .instr__text:has(.wp-block-gallery) > :not(.wp-block-gallery) { max-width: 68ch; margin-left: calc(25% + var(--gap)); }
  .entry .wp-block-gallery { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; }
}

/* Aktuelles */
.posts { grid-column: 1 / -1; display: grid; gap: calc(var(--sec2) * .7) var(--gap); margin-top: var(--sec2); }
@media (min-width: 992px) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #E8E3D8; margin-bottom: 14px; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; }
.post-card__title { font-size: var(--h3); margin: 8px 0 10px; }
.post-card__title a { text-decoration: none; }
.pager { grid-column: 1 / -1; margin-top: var(--sec2); }

/* правовые страницы: один столбец */
.page--legal .instr__text { font-size: 16px; }
.fehlt { background: #F3DADD; color: var(--felt); padding: 0 .25em; }

/* формы (Contact Form 7) */
.wpcf7 form { display: grid; gap: 18px; }
.wpcf7 label { display: grid; gap: 6px; font: 500 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wpcf7 input:not([type=submit]):not([type=checkbox]), .wpcf7 select, .wpcf7 textarea {
  width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--muted); border-radius: 0; background: #fff;
  font: 400 17px/1.4 var(--sans); color: var(--ebony); text-transform: none; letter-spacing: 0;
}
.wpcf7 textarea { min-height: 160px; }
.wpcf7 .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-acceptance label, .wpcf7 .wpcf7-list-item label { display: flex; gap: 10px; align-items: flex-start; text-transform: none; letter-spacing: 0; font: 400 15px/1.45 var(--sans); color: var(--ebony); }
.wpcf7 input[type=checkbox] { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--felt); }
.wpcf7 input[type=submit] { justify-self: start; min-height: 52px; padding: 0 28px; background: var(--felt); color: #fff; border: 0; font: 500 16px/1 var(--sans); cursor: pointer; }
.wpcf7 input[type=submit]:disabled { opacity: .6; }
.wpcf7-not-valid-tip { color: var(--felt); font: 400 14px/1.3 var(--sans); text-transform: none; letter-spacing: 0; }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: 14px 16px; border: 1px solid var(--muted); font-size: 15px; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #2E6B3A; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: var(--felt); }
.screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* iOS Safari: поле даты игнорирует width: 100% и выходит за край, пустое не видно (скрин CEO 10.11) */
.wpcf7 input[type=date] {
  -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%235E5A52' stroke-width='1.5'%3E%3Crect x='2.5' y='4' width='15' height='13.5'/%3E%3Cpath d='M2.5 8h15M6.5 2v4M13.5 2v4'/%3E%3C/svg%3E") no-repeat right 14px center;
  padding-right: 46px;
}
.wpcf7 input[type=date]::-webkit-date-and-time-value { text-align: left; min-height: 1.4em; }
.wpcf7 input[type=date]::-webkit-calendar-picker-indicator { opacity: 0; width: 28px; }
.wpcf7-form-control-wrap { display: block; min-width: 0; }