/*
Theme Name: Bai Bun Thaimassage
Theme URI: https://baibun-massage.testumgebung.webserver.ergebnisreich.de/
Description: ...
Author: ergebnisreich
Author URI: https://ergebnisreich.de/
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: baibun
Tags: custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   Design-Tokens
   ========================================================================== */
:root {
  /* Farbpalette */
  --color-bg: #EEEBE4;
  --color-surface: #7C8B7C;          /* Primär – Salbeigrün (Karten, Buttons) */
  --color-surface-tint: #dbe6dc;     /* helles Grün (Text auf Grün) */
  --color-brand: #887157;            /* Header / Footer / Braun */
  --color-ink: #2C1C14;              /* dunkelbrauner Text / Headlines */
  --color-ink-soft: #4D340B;
  --color-accent: #D68905;           /* Orange-Akzent */
  --color-accent-earth: #ae7a50;
  --color-on-dark: #EEEBE4;          /* Text auf dunklem Grund */
  --color-white: #fff;
  --color-nav-mobile-bg: #cecdbb;
  --color-nav-mobile-ink: #323012;
  --color-hamburger: #e5e4db;

  /* Linien / Radien / Schatten */
  --border: 1px solid rgba(44, 28, 20, 0.12);
  --radius: 8px;
  --radius-pill: 0.5rem;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-sticky: 0 4px 20px rgba(0, 0, 0, 0.18);

  /* Layout */
  --content-max: 80rem;
  --gutter: 1.5rem;

  /* Typografie */
  --font-display: "Glimse", Georgia, "Times New Roman", serif;
  --font-body: sans-serif;

  /*
   * Breakpoints (Referenz – Custom Properties funktionieren nicht in @media):
   *   --bp-mobile   : 500px   kleine Phones
   *   --bp-typo     : 560px   Typo-Sprung
   *   --bp-nav      : 990px   Umschaltpunkt Desktop-/Mobil-Navigation
   *   --bp-wide     : 1280px  großzügige Desktop-Abstände
   */
}

/* ==========================================================================
   Massagen-Karussell  (Shortcode [massagen])
   ========================================================================== */
.block-massagen {
  gap: 10px;
}

/* Core setzt .wp-block-columns { flex-wrap: wrap !important } inline –
   deshalb ist hier !important nötig, damit das Karussell nicht umbricht. */
.wp-block-columns.block-massagen {
  flex-wrap: nowrap !important;
}

.block-massagen .element-carousel-item {
  min-height: 240px;
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease;
}

.block-massagen .element-carousel-item:hover {
  transform: scale(1.035);
}

.block-massagen .element-carousel-item a {
  text-decoration: none;
}

.block-massagen .element-carousel-item h3 {
  display: flex;
  align-items: flex-end;
  margin-top: 24px;
  margin-bottom: 0.5rem;
  padding: 0 1.3125rem;
  font-size: 21px;
  text-align: left;
  color: var(--color-surface-tint);
  hyphens: auto;
}

.block-massagen .element-carousel-item .box-element-content p {
  padding: 0 1.3125rem 18px;
  font-size: 13px;
  font-weight: 300;
  line-height: 21px;
  letter-spacing: 0.05rem;
  color: var(--color-on-dark);
}

.block-massagen .element-carousel-item .wp-block-buttons > .wp-block-button {
  max-width: 100%;
  width: auto;
}

.block-massagen .element-carousel-item .wp-block-button span {
  margin-left: 1.3125rem;
  margin-bottom: 1.75rem;
  padding: calc(0.5em + 2px) calc(1rem + 2px);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.25px;
  color: var(--color-ink);
  background: var(--color-surface-tint);
  border-radius: var(--radius-pill);
}

.block-massagen .element-carousel-item img {
  width: 100%;
  height: auto;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.block-massagen .carousel-slid-item.tns-item img {
  max-width: 100%;
  height: auto;
}

.block-massagen .element-carousel-item .box-element-image figure {
  position: relative;
  overflow: hidden;
}

.block-massagen .element-carousel-item .box-element-image figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--color-surface) 0%, transparent 75%);
}

.block-massagen .element-carousel-item:hover .box-element-image .wp-block-image {
  border-radius: var(--radius);
}

/* ==========================================================================
   Abschnitt „Leistungen"
   ========================================================================== */
.leistungen .wp-block-inline {
  padding: 60px 0;
  margin-left: var(--gutter);
  margin-right: var(--gutter);
}

.leistungen > .wp-block-columns {
  gap: 0;
}

@media (min-width: 1280px) {
  .leistungen .wp-block-inline {
    margin-right: 0;
  }
}