/**
 * WP Adventskalender - Stylesheet
 *
 * Haupt-Stylesheet für das Adventskalender-Plugin.
 * Enthält alle Frontend-Styles für die Kalender-Darstellung.
 *
 * @package    WP_Adventskalender
 * @subpackage Frontend/CSS
 * @since      0.1.0
 * @version    0.2.1
 *
 * Inhaltsverzeichnis:
 * -------------------
 * 1. Root Container
 * 2. Grid Layout
 * 3. Türchen (Door Cards)
 * 4. Türchen-Status (locked, present, past)
 * 5. Türchen-Inhalte (Front & Back)
 * 6. Responsive Breakpoints
 *
 * Responsive Breakpoints:
 * -----------------------
 * - 4K:       > 2560px
 * - 1440p:    1441px - 2560px
 * - Standard: 1025px - 1440px
 * - Tablet:   768px - 1024px
 * - Mobile:   < 768px
 */

/* ==========================================================================
   1. ROOT CONTAINER
   ========================================================================== */

/**
 * Hauptcontainer für den Adventskalender
 * Verwendet CSS Custom Property --advent-root-max-width
 */
.adventskalender-root {
  display: block;
  margin: 0.5rem 0;
  width: 100%;
  max-width: var(--advent-root-max-width, 100%);
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
}

.adventskalender-root[data-bg] {
  background-image: url(attr(data-bg url));
  background-size: cover;
  background-position: center;
}

@media (max-width: 640px) {
  .adventskalender-root[data-bg-mobile] {
    background-image: url(attr(data-bg-mobile url));
  }
}

/* ==========================================================================
   2. GRID LAYOUT
   ========================================================================== */

.advent-grid {
  --advent-grid-columns: auto-fit;
  --advent-grid-min-size: 160px;
  --advent-grid-max-size: var(--door-width-desktop, 200px);
  --door-width-desktop: 200px;
  --door-height-desktop: 240px;
  --door-width-mobile: 150px;
  --door-height-mobile: 200px;
  --door-width-current: var(--door-width-desktop, 200px);
  --door-height-current: var(--door-height-desktop, 240px);
  --door-min-width-factor: 0.85;
  --advent-grid-gap-base: clamp(18px, 3vw, 32px);
  --advent-grid-gap-max: 50px;
  --advent-grid-padding: 0px;
  --door-border-width: 2px;
  --door-border-style: solid;
  --door-border-color: rgba(255, 255, 255, 0.75);
  --door-border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(
    var(--advent-grid-columns, auto-fit),
    minmax(
      var(--advent-grid-min-size, 160px),
      max(
        var(--advent-grid-min-size, 160px),
        var(--advent-grid-max-size, 200px)
      )
    )
  );
  gap: var(--advent-grid-gap, var(--advent-grid-gap-base, 24px));
  justify-items: center;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: var(--advent-grid-padding, 0px);
  border: none;
}

.door-card {
  --door-translate-x: 0px;
  --door-translate-y: 0px;
  --door-animation-duration: 0.85s;
  position: relative;
  overflow: visible;
  border-radius: var(--door-border-radius, 10px);
  background: transparent;
  border: var(--door-border-width, 2px) var(--door-border-style, solid)
    var(--door-border-color, rgba(255, 255, 255, 0.75));
  box-shadow: none;
  cursor: pointer;
  perspective: 1200px;
  width: min(var(--door-width-current, var(--door-width-desktop, 200px)), 100%);
  max-width: var(--door-width-current, var(--door-width-desktop, 200px));
  min-width: calc(
    var(--door-width-current, var(--door-width-desktop, 200px)) *
      var(--door-min-width-factor, 0.85)
  );
  height: var(--door-height-current, var(--door-height-desktop, auto));
  min-height: var(--door-height-current, var(--door-height-desktop, 0px));
  transition: transform 0.2s ease;
  will-change: transform;
  transform: translate(var(--door-translate-x), var(--door-translate-y));
  margin-top: var(--door-margin-top, 0px);
  margin-bottom: var(--door-margin-bottom, 0px);
  margin-left: var(--door-margin-left, 0px);
  margin-right: var(--door-margin-right, 0px);
}

.door-card.lockerd .door-front {
  filter: grayscale(0.45);
  opacity: 1;
}

.door-card.present .door-front {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8),
    0 10px 25px rgba(0, 0, 0, 0.35);
}

.door-card.past .door-front {
  filter: none;
  opacity: 1;
}
.door-card.past .door-front {
  display: none;
}

.door-card:hover {
  transform: translate(
    var(--door-translate-x),
    calc(var(--door-translate-y) - 4px)
  );
}

.door-card .door-number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.door-card.locked .door-image {
  filter: blur(2px) grayscale(30%);
  transform: scale(1.02);
}

.door-lock-overlay {
  font-weight: 700;
  font-size: 1rem;
}

@media (max-width: 900px) {
  .advent-grid {
    --advent-grid-min-size: var(--door-width-desktop, 140px);
    --advent-grid-max-size: var(--door-width-desktop, 140px);
    --advent-grid-gap-base: clamp(14px, 2.5vw, 24px);
  }
}

@media (max-width: 600px) {
  .advent-grid {
    --advent-grid-columns: auto-fit;
    --advent-grid-min-size: var(--door-width-mobile, 130px);
    --advent-grid-max-size: var(--door-width-mobile, 150px);
    --advent-grid-gap-base: 14px;
    --door-width-current: var(--door-width-mobile, 150px);
    --door-height-current: var(--door-height-mobile, 200px);
    --door-min-width-factor: 0.8;
    justify-items: stretch;
  }
}

@media (max-width: 420px) {
  .advent-grid {
    --advent-grid-columns: auto-fit;
    --advent-grid-min-size: var(--door-width-mobile, 130px);
    --advent-grid-max-size: var(--door-width-mobile, 130px);
    --advent-grid-gap-base: 10px;
    --door-width-current: var(--door-width-mobile, 130px);
    --door-height-current: var(--door-height-mobile, 200px);
    --door-min-width-factor: 1;
    justify-items: stretch;
  }
  .door-card {
    width: 100%;
    max-width: 100%;
  }
}

/* Layout & typography */
.advent-container {
  font-family: sans-serif;
  padding: 1rem;
}
.advent-title {
  margin: 0 0 1rem;
}
.admin-tools {
  margin: 0 0 12px;
}
.admin-note {
  margin-left: 12px;
  color: #666;
}
.advent-loading {
  color: #333;
}
.advent-error {
  color: red;
}

/* Door content */
.door-content {
  padding: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  position: absolute;
}
.door-title {
  margin: 6px 0;
  font-size: 1rem;
}
.door-teaser {
  margin: 2px 0 8px;
  font-size: 0.95rem;
  color: #f6f6f6;
  opacity: 0.9;
}
.door-placeholder {
  height: 160px;
  background: #eee;
}
.door-back-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.door-back-link {
  text-decoration: none;
  color: inherit;
}
.door-back-link:hover .door-content {
  background: rgba(0, 0, 0, 0.65);
}
.door-lock-overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

.door-back {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  z-index: 1;
  border-radius: var(--door-border-radius, 10px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.door-front {
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  border-radius: var(--door-border-radius, 10px);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 0.6s ease, opacity 0.45s ease;
  will-change: transform, opacity;
  transform-origin: center center;
}

.door-back .door-image {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  object-fit: cover;
}