/**
 * Jonny B GmbH – Komponenten CSS
 * Buttons, Formulare, Cookie-Banner, E-Mail-Schutz, etc.
 */

/* --------------------------------------------------------
 * Buttons
 * -------------------------------------------------------- */
.btn {
    display:        inline-block;
    padding:        var(--space-3) var(--space-6);
    background:     var(--color-accent);      /* #aad019 */
    color:          var(--color-gray-900);    /* Dunkel für Kontrast auf hellem Grün */
    font-family:    var(--font-body);
    font-size:      var(--font-size-base);
    font-weight:    var(--font-weight-semibold);
    text-align:     center;
    border:         2px solid transparent;
    border-radius:  var(--radius-sm);
    cursor:         pointer;
    transition:     background var(--transition-fast), color var(--transition-fast);
    text-decoration: none;
}
.btn:hover {
    background: var(--color-accent-dark);
    color:      var(--color-gray-900);
}
.btn--outline {
    background:     transparent;
    border-color:   var(--color-accent);      /* #aad019 */
    color:          var(--color-accent);
}
.btn--outline:hover {
    background:     var(--color-accent);
    color:          var(--color-gray-900);
}

/* --------------------------------------------------------
 * E-Mail-Schutz (JS-gesteuert, DSGVO: keine Mailto im HTML)
 * -------------------------------------------------------- */
.email-protected {
    color:          var(--color-primary);
    cursor:         pointer;
    text-decoration: underline;
    font-weight:    var(--font-weight-semibold);
}
.email-protected:hover {
    color: var(--color-primary-dark);
}

/* --------------------------------------------------------
 * Cookie-Banner
 * -------------------------------------------------------- */
.cookie-banner {
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    1000;
    background: var(--color-gray-900);
    border-top: 3px solid var(--color-primary);
    box-shadow: var(--shadow-lg);
}
.cookie-banner[hidden] {
    display: none;
}
.cookie-banner__inner {
    max-width:      var(--container-max);
    margin:         0 auto;
    padding:        var(--space-5) var(--container-pad);
    display:        flex;
    align-items:    center;
    gap:            var(--space-6);
    flex-wrap:      wrap;
}
.cookie-banner__text {
    flex:       1;
    color:      var(--color-gray-300);
    font-size:  var(--font-size-sm);
}
.cookie-banner__text a {
    color: var(--color-accent);
}
.cookie-banner__btn {
    padding:        var(--space-2) var(--space-6);
    background:     var(--color-primary);
    color:          var(--color-white);
    border:         none;
    border-radius:  var(--radius-sm);
    cursor:         pointer;
    font-weight:    var(--font-weight-semibold);
    white-space:    nowrap;
    transition:     background var(--transition-fast);
}
.cookie-banner__btn:hover {
    background: var(--color-primary-dark);
}

/* --------------------------------------------------------
 * Fehlerseite
 * -------------------------------------------------------- */
.error-page {
    max-width:  600px;
    margin:     var(--space-12) auto;
    padding:    var(--space-8) var(--container-pad);
    text-align: center;
}
.error-page h1 {
    margin-bottom: var(--space-4);
}
.error-page p {
    margin-bottom: var(--space-6);
    color: var(--color-gray-700);
}

/* --------------------------------------------------------
 * Text-Seiten (Impressum, Datenschutz)
 * -------------------------------------------------------- */
.text-page {
    max-width:  800px;
    margin:     0 auto;
    padding:    var(--space-8) var(--container-pad);
}
.text-page h1 {
    margin-bottom: var(--space-6);
}
.text-page__content h2 {
    margin-top:    var(--space-8);
    margin-bottom: var(--space-3);
    font-size:     var(--font-size-xl);
}
.text-page__content h3 {
    margin-top:    var(--space-5);
    margin-bottom: var(--space-2);
}
.text-page__content p {
    margin-bottom: var(--space-4);
}
.text-page__content a {
    text-decoration: underline;
}
.text-page__content ul,
.text-page__content ol {
    margin-bottom: var(--space-4);
    padding-left:  var(--space-6);
}
.text-page__content li {
    margin-bottom: var(--space-1);
    line-height:   var(--line-height-base);
}

/* --------------------------------------------------------
 * Hero-Slider
 * Fullwidth, Fade-Übergang, Vanilla JS
 * -------------------------------------------------------- */
.hero-slider {
    position:   relative;
    width:      100%;
    overflow:   hidden;
    background: var(--color-gray-900);
    /* Seitenverhältnis Mobil: 4:3 */
    aspect-ratio: 4 / 3;
}

@media (min-width: 600px) {
    .hero-slider { aspect-ratio: 16 / 7; }
}

@media (min-width: 900px) {
    .hero-slider { aspect-ratio: 16 / 6; }
}

/* Einzelne Slides */
.hero-slider__slide {
    position:   absolute;
    inset:      0;
    opacity:    0;
    transition: opacity 1s ease;
    pointer-events: none;
}

.hero-slider__slide.is-active {
    opacity:        1;
    pointer-events: auto;
}

/* Bild */
.hero-slider__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center;
    display:    block;
}

/* Text-Caption (weißer Balken wie im Original) */
.hero-slider__caption {
    position:   absolute;
    bottom:     10%;
    left:       0;
    padding:    var(--space-3) var(--space-6);
    background: rgba(255, 255, 255, 0.92);
    max-width:  75%;
}

@media (min-width: 900px) {
    .hero-slider__caption {
        bottom:  12%;
        padding: var(--space-4) var(--space-8);
    }
}

.hero-slider__headline {
    font-size:   var(--font-size-lg);
    font-style:  italic;
    font-weight: var(--font-weight-regular);
    color:       var(--color-gray-900);
    line-height: var(--line-height-heading);
    margin:      0;
}

@media (min-width: 600px) {
    .hero-slider__headline { font-size: var(--font-size-xl); }
}

@media (min-width: 900px) {
    .hero-slider__headline { font-size: var(--font-size-2xl); }
}

.hero-slider__subline {
    font-size:   var(--font-size-base);
    color:       var(--color-gray-700);
    margin:      var(--space-1) 0 0;
}

/* CTA-Button im Slide */
.hero-slider__cta {
    display:        inline-block;
    margin-top:     var(--space-3);
    padding:        var(--space-2) var(--space-5);
    background:     var(--color-accent);
    color:          var(--color-gray-900);
    font-weight:    var(--font-weight-semibold);
    font-size:      var(--font-size-sm);
    border-radius:  var(--radius-sm);
    transition:     background var(--transition-fast);
}

.hero-slider__cta:hover {
    background: var(--color-accent-dark);
}

/* Pfeil-Buttons */
.hero-slider__arrow {
    position:       absolute;
    top:            50%;
    transform:      translateY(-50%);
    background:     rgba(255, 255, 255, 0.75);
    border:         none;
    cursor:         pointer;
    width:          44px;
    height:         44px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    border-radius:  50%;
    transition:     background var(--transition-fast);
    z-index:        10;
}

.hero-slider__arrow:hover {
    background: rgba(255, 255, 255, 0.95);
}

.hero-slider__arrow--prev { left:  var(--space-3); }
.hero-slider__arrow--next { right: var(--space-3); }

/* Punkte-Navigation */
.hero-slider__dots {
    position:       absolute;
    bottom:         var(--space-3);
    left:           50%;
    transform:      translateX(-50%);
    display:        flex;
    gap:            var(--space-2);
    z-index:        10;
}

.hero-slider__dot {
    width:          12px;
    height:         12px;
    border-radius:  50%;
    background:     rgba(255, 255, 255, 0.55);
    border:         none;
    cursor:         pointer;
    transition:     background var(--transition-fast);
    padding:        0;
}

.hero-slider__dot.is-active,
.hero-slider__dot:hover {
    background: rgba(255, 255, 255, 0.95);
}

/* --------------------------------------------------------
 * Startseite – Intro-Block "Für alle, die Möbel lieben"
 * Zwischen Slider und 3-Spalten-Teaser
 * -------------------------------------------------------- */
.home-welcome {
    background:     var(--color-white);
    padding:        var(--space-8) var(--container-pad);
    text-align:     center;
}

.home-welcome h1 {
    margin-bottom:  var(--space-4);
}

.home-welcome p {
    margin-bottom:  var(--space-6);
    color:          var(--color-gray-700);
    line-height:    var(--line-height-base);
    max-width:      60ch;
    margin-left:    auto;
    margin-right:   auto;
}

/* --------------------------------------------------------
 * Startseite – 3-Spalten-Teaser unter dem Slider
 * -------------------------------------------------------- */
.home-teaser {
    background:     var(--color-gray-200);
    padding:        var(--space-8) var(--container-pad);
}

.home-teaser__grid {
    max-width:      var(--container-max);
    margin:         0 auto;
    display:        grid;
    grid-template-columns: 1fr;
    gap:            var(--space-6);
}

@media (min-width: 600px) {
    .home-teaser__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
    .home-teaser__grid { grid-template-columns: repeat(3, 1fr); }
}

.home-teaser__item {
    background:         var(--color-white);
    padding:            var(--space-6);
    border-radius:      var(--radius-md);
    /* Flexbox: Button wird an den unteren Rand gedrückt */
    display:            flex;
    flex-direction:     column;
}

.home-teaser__item h2 {
    margin-bottom:  var(--space-3);
    font-size:      var(--font-size-xl);
    color:          var(--color-accent); /* #aad019 */
}

.home-teaser__item p {
    flex-grow:      1; /* Nimmt verfügbaren Platz – Button rutscht nach unten */
    margin-bottom:  var(--space-5);
    color:          var(--color-gray-700);
    line-height:    var(--line-height-base);
}

.home-teaser__item .btn {
    align-self: flex-start; /* Button nicht auf volle Breite strecken */
}

/* --------------------------------------------------------
 * Startseite – Einleitungstext + Möbel nach Maß
 * Gleiche Ausrichtung wie das 3-Spalten-Teaser-Grid
 * -------------------------------------------------------- */
.home-intro,
.home-mass {
    padding:    var(--space-10) var(--container-pad);
}

.home-mass {
    background: var(--color-gray-100);
}

.home-intro__text {
    /* Gleicher max-width wie .home-teaser__grid → fluchtet mit den Kacheln */
    max-width:  var(--container-max);
    margin:     0 auto;
}

.home-intro__text h2 {
    margin-bottom:  var(--space-5);
}

.home-intro__text p {
    margin-bottom:      var(--space-6);
    line-height:        var(--line-height-base);
    color:              var(--color-gray-700);
    max-width:          70ch; /* Lesbare Zeilenlänge */
}

/* --------------------------------------------------------
 * Öffnungszeiten-Banner (Startseite)
 * Scrollt mit der Seite weg, Nav bleibt sticky
 * -------------------------------------------------------- */
.oz-banner {
    /* Farbiger Hintergrund geht auf volle Fensterbreite */
    font-size:      var(--font-size-sm);
    font-weight:    var(--font-weight-semibold);
    border-bottom:  1px solid transparent;
    transition:     background var(--transition-base);
}

/* Innerer Container fluchtet mit Logo und Menü */
.oz-banner__container {
    max-width:      var(--container-max);
    margin:         0 auto;
    padding:        var(--space-3) var(--container-pad);
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            var(--space-4);
}

/* Zustands-Klassen – werden per JS gesetzt */
.oz-banner--open {
    background:     #e8f5e9;
    border-color:   #81c784;
    color:          #1b5e20;
}

.oz-banner--closed {
    background:     #ffebee;
    border-color:   #ef9a9a;
    color:          #b71c1c;
}

.oz-banner--vacation {
    background:     #fff8e1;
    border-color:   #ffe082;
    color:          #e65100;
}

.oz-banner--special {
    background:     #e3f2fd;
    border-color:   #90caf9;
    color:          #0d47a1;
}

.oz-banner__inner {
    display:        flex;
    align-items:    center;
    gap:            var(--space-3);
    flex:           1;
}

.oz-banner__icon {
    font-size:      1.2em;
    flex-shrink:    0;
}

.oz-banner__close {
    background:     none;
    border:         none;
    cursor:         pointer;
    opacity:        0.6;
    padding:        var(--space-1);
    flex-shrink:    0;
    color:          inherit;
    line-height:    1;
    transition:     opacity var(--transition-fast);
}

.oz-banner__close:hover {
    opacity: 1;
}

/* --------------------------------------------------------
 * Seitenüberschrift (Innenbereich-Seiten)
 * -------------------------------------------------------- */
.page-header {
    background:     var(--color-gray-200);
    border-bottom:  2px solid var(--color-gray-300);
    padding:        var(--space-8) var(--container-pad);
    text-align:     center;
}

.page-header h1 {
    margin-bottom: var(--space-2);
}

.page-header__sub {
    color:      var(--color-gray-700);
    font-size:  var(--font-size-lg);
    margin:     0;
}

/* --------------------------------------------------------
 * Ausstellungs-Seite – 360°-Rundgang
 * -------------------------------------------------------- */
.rundgang-section {
    background:  var(--color-white);
    padding:     var(--space-8) var(--container-pad);
}

.rundgang-section iframe {
    display:       block;
    width:         100%;
    max-width:     1280px;
    height:        600px;
    margin:        0 auto;
    border:        none;
    border-radius: var(--radius-md);
    box-shadow:    0 2px 12px rgba(0, 0, 0, .12);
}

/* --------------------------------------------------------
 * Kontaktseite – Formular
 * -------------------------------------------------------- */
.contact-section {
    background: var(--color-white);
    padding:    var(--space-10) var(--container-pad);
}

.contact-section__inner {
    max-width:  720px;
    margin:     0 auto;
}

/* --------------------------------------------------------
 * Newsletter-Seite
 * -------------------------------------------------------- */
.newsletter-page {
    background: var(--color-white);
    padding:    var(--space-10) var(--container-pad);
}

.newsletter-page__inner {
    max-width:  600px;
    margin:     0 auto;
}

.newsletter-page__intro {
    color:          var(--color-gray-700);
    line-height:    var(--line-height-base);
    margin-bottom:  var(--space-8);
    max-width:      55ch;
}

.contact-col-title {
    font-size:      var(--font-size-2xl);
    margin-bottom:  var(--space-3);
}

.contact-col-intro {
    color:          var(--color-gray-700);
    line-height:    var(--line-height-base);
    margin-bottom:  var(--space-6);
    max-width:      60ch;
}

/* --------------------------------------------------------
 * Formular – Basis
 * -------------------------------------------------------- */
.contact-form {
    display:    flex;
    flex-direction: column;
    gap:        var(--space-5);
}

/* Honeypot unsichtbar machen (für Screenreader bleibt aria-hidden) */
.contact-form__honeypot {
    position:   absolute;
    left:       -9999px;
    top:        -9999px;
    width:      1px;
    height:     1px;
    overflow:   hidden;
}

/* --------------------------------------------------------
 * Formular – Beschriftungen
 * -------------------------------------------------------- */
.form-label {
    display:        block;
    font-weight:    var(--font-weight-semibold);
    font-size:      var(--font-size-sm);
    color:          var(--color-gray-700);
    margin-bottom:  var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-required {
    color:          var(--color-error);
    margin-left:    2px;
}

.form-optional {
    font-weight:    var(--font-weight-regular);
    color:          var(--color-gray-500);
    font-size:      var(--font-size-sm);
    text-transform: none;
    letter-spacing: 0;
}

/* --------------------------------------------------------
 * Formular – Eingabefelder
 * -------------------------------------------------------- */
.form-control {
    display:        block;
    width:          100%;
    padding:        var(--space-3) var(--space-4);
    background:     var(--color-white);
    border:         1.5px solid var(--color-gray-300);
    border-radius:  var(--radius-sm);
    font-family:    var(--font-body);
    font-size:      var(--font-size-base);
    color:          var(--color-text);
    transition:     border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing:     border-box;
}

.form-control:focus {
    outline:        none;
    border-color:   var(--color-primary);
    box-shadow:     0 0 0 3px rgba(74, 124, 63, 0.15);
}

.form-control::placeholder {
    color: var(--color-gray-500);
}

textarea.form-control {
    resize:         vertical;
    min-height:     140px;
}

.form-select {
    appearance:     none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%235a5650' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right var(--space-3) center;
    background-size:     16px;
    padding-right:  var(--space-8);
    cursor:         pointer;
}

/* --------------------------------------------------------
 * Formular – Zweispaltige Zeile
 * -------------------------------------------------------- */
.form-row {
    display:    grid;
    grid-template-columns: 1fr;
    gap:        var(--space-5);
}

@media (min-width: 600px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* --------------------------------------------------------
 * Formular – Gruppen
 * -------------------------------------------------------- */
.form-group {
    display:    flex;
    flex-direction: column;
}

/* Terminanfrage-Datum: optisch hervorgehoben */
.form-group--termin {
    background:     var(--color-gray-100);
    border-left:    3px solid var(--color-accent);
    padding:        var(--space-4);
    border-radius:  0 var(--radius-sm) var(--radius-sm) 0;
}

.form-group--termin[hidden] {
    display: none;
}

/* --------------------------------------------------------
 * Formular – Fieldset (Radiogruppe)
 * -------------------------------------------------------- */
.form-fieldset {
    border:     none;
    padding:    0;
    margin:     0;
}

.form-radio-group {
    display:    flex;
    flex-direction: column;
    gap:        var(--space-3);
    margin-top: var(--space-2);
}

@media (min-width: 600px) {
    .form-radio-group {
        flex-direction: row;
        gap: var(--space-6);
    }
}

.form-radio-label {
    display:    flex;
    align-items: center;
    gap:        var(--space-2);
    cursor:     pointer;
    font-size:  var(--font-size-base);
    color:      var(--color-text);
}

.form-radio-label input[type="radio"] {
    width:          18px;
    height:         18px;
    accent-color:   var(--color-primary);
    cursor:         pointer;
    flex-shrink:    0;
}

/* --------------------------------------------------------
 * Formular – Checkbox (Datenschutz)
 * -------------------------------------------------------- */
.form-group--checkbox {
    background:     var(--color-gray-100);
    padding:        var(--space-4);
    border-radius:  var(--radius-sm);
}

.form-checkbox-label {
    display:    flex;
    align-items: flex-start;
    gap:        var(--space-3);
    cursor:     pointer;
    font-size:  var(--font-size-sm);
    line-height: var(--line-height-base);
    color:      var(--color-gray-700);
}

.form-checkbox-label input[type="checkbox"] {
    width:          18px;
    height:         18px;
    accent-color:   var(--color-primary);
    flex-shrink:    0;
    margin-top:     2px;
    cursor:         pointer;
}

.form-checkbox-label a {
    color:          var(--color-primary);
    text-decoration: underline;
}

/* --------------------------------------------------------
 * Formular – Hinweistexte & Footer
 * -------------------------------------------------------- */
.form-hint {
    display:    block;
    margin-top: var(--space-1);
    color:      var(--color-gray-500);
    font-size:  var(--font-size-sm);
}

.form-footer {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    flex-wrap:      wrap;
    gap:            var(--space-4);
    padding-top:    var(--space-2);
    border-top:     1px solid var(--color-gray-200);
}

.form-required-note {
    font-size:  var(--font-size-sm);
    color:      var(--color-gray-500);
    margin:     0;
}

/* --------------------------------------------------------
 * Formular – Meldungen (Erfolg / Fehler)
 * -------------------------------------------------------- */
.form-alert {
    padding:        var(--space-4) var(--space-5);
    border-radius:  var(--radius-sm);
    font-size:      var(--font-size-sm);
    line-height:    var(--line-height-base);
}

.form-alert--success {
    background:     #e8f5e9;
    border:         1.5px solid #81c784;
    color:          #1b5e20;
}

.form-alert--error {
    background:     #fdecea;
    border:         1.5px solid #e57373;
    color:          #b71c1c;
}

.form-alert__list {
    margin:     var(--space-2) 0 0 var(--space-5);
    padding:    0;
}

.form-alert__list li {
    margin-bottom: var(--space-1);
}

/* --------------------------------------------------------
 * Newsletter-Iframe
 * -------------------------------------------------------- */
.newsletter-col {
    position:   sticky;
    top:        calc(var(--nav-height) + var(--space-6));
}

.newsletter-iframe-wrap {
    border:         1.5px solid var(--color-gray-300);
    border-radius:  var(--radius-md);
    overflow:       hidden;
    background:     var(--color-white);
    min-height:     540px;
}

.newsletter-dsgvo {
    margin-top:     var(--space-3);
    font-size:      var(--font-size-sm);
    color:          var(--color-gray-500);
    text-align:     center;
}

.newsletter-dsgvo a {
    color:          var(--color-gray-700);
    text-decoration: underline;
}

/* --------------------------------------------------------
 * Produkt-Übersicht (Tische, Stühle …)
 * Intro-Textblock über dem Kachelraster
 * -------------------------------------------------------- */
.product-intro {
    background:     var(--color-gray-100);
    padding:        var(--space-4) var(--container-pad) 0;
}

.product-intro__inner {
    background:     var(--color-white);
    max-width:      var(--container-max);
    margin:         0 auto;
    padding:        var(--space-6) var(--space-8);
    color:          var(--color-gray-700);
    line-height:    var(--line-height-base);
}

.product-intro__inner p {
    margin-bottom:  var(--space-4);
    max-width:      75ch;
}

/* Kachelraster */
.product-grid-section {
    background:     var(--color-gray-100);
    padding:        5px var(--container-pad) var(--space-12);
}

.product-grid {
    max-width:      var(--container-max);
    margin:         0 auto;
    display:        grid;
    grid-template-columns: 1fr;
    gap:            0;
    border-top:     2px solid var(--color-gray-100);
    border-left:    2px solid var(--color-gray-100);
}

@media (min-width: 600px) {
    .product-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
}

.product-grid__empty {
    padding:        var(--space-8) var(--container-pad);
    color:          var(--color-gray-500);
}

/* Einzelne Produktkachel */
.product-card {
    background:     var(--color-white);
    border-right:   2px solid var(--color-gray-100);
    border-bottom:  2px solid var(--color-gray-100);
    padding:        var(--space-6);
    display:        flex;
    flex-direction: column;
}

.product-card__name {
    font-size:      var(--font-size-xl);
    font-weight:    var(--font-weight-semibold);
    margin-bottom:  var(--space-4);
    color:          var(--color-gray-900);
}

/* Bildcontainer mit festem Seitenverhältnis */
.product-card__img-link {
    display:        block;
    margin-bottom:  var(--space-4);
}

.product-card__img-wrap {
    position:       relative;
    aspect-ratio:   4 / 3;
    overflow:       hidden;
    background:     var(--color-gray-200);
    border-radius:  var(--radius-md);
}

.product-card__img {
    width:          100%;
    height:         100%;
    object-fit:     cover;
    object-position: center;
    display:        block;
    transition:     transform var(--transition-base);
}

.product-card__img-link:hover .product-card__img {
    transform:      scale(1.03);
}

.product-card__desc {
    flex-grow:      1;
    color:          var(--color-gray-700);
    font-size:      var(--font-size-base);
    line-height:    var(--line-height-base);
    margin-bottom:  var(--space-3);
}

.product-card__price {
    font-size:      var(--font-size-base);
    font-weight:    var(--font-weight-semibold);
    color:          var(--color-gray-900);
    margin-bottom:  var(--space-4);
}

.product-card__price strong {
    color:          var(--color-accent-dark);
}

.product-card__btn {
    align-self:     flex-start;
    font-size:      var(--font-size-sm);
    padding:        var(--space-2) var(--space-4);
}

/* --------------------------------------------------------
 * Kontakt-Info-Leiste (Adresse, Telefon, Öffnungszeiten)
 * -------------------------------------------------------- */
.contact-info {
    background:     var(--color-gray-200);
    padding:        var(--space-10) var(--container-pad);
    border-top:     2px solid var(--color-gray-300);
}

.contact-info__inner {
    max-width:      var(--container-max);
    margin:         0 auto;
    display:        grid;
    grid-template-columns: 1fr;
    gap:            var(--space-8);
}

@media (min-width: 600px) {
    .contact-info__inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 900px) {
    .contact-info__inner {
        grid-template-columns: repeat(3, 1fr);
    }
}

.contact-info__block h3 {
    font-size:      var(--font-size-base);
    font-weight:    var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--color-accent-dark);
    margin-bottom:  var(--space-3);
}

.contact-info__block address,
.contact-info__block p {
    font-style:     normal;
    font-size:      var(--font-size-base);
    line-height:    var(--line-height-base);
    color:          var(--color-gray-700);
    margin:         0;
}

.contact-info__block a {
    color:          var(--color-primary);
    text-decoration: none;
}

.contact-info__block a:hover {
    text-decoration: underline;
}