/* File: inc/public/branding/knx-city-grid.css */

/**
 * ==========================================================
 * KNX City Grid — SSOT CSS (v1.1)
 * ----------------------------------------------------------
 * Fixes:
 * - Removes “ugly black frame” in Settings preview by ensuring
 *   the preview wrapper is borderless (Settings CSS also enforces).
 * ==========================================================
 */

.knx-city-grid-wrap{
  /* Gradient */
  --knx-city-grad-from: #FF7A00;
  --knx-city-grad-to: #FFB100;
  --knx-city-grad-angle: 90deg;

  /* Card */
  --knx-city-card-radius: 18px;
  --knx-city-card-min-height: 180px;
  --knx-city-card-padding-y: 26px;
  --knx-city-card-padding-x: 22px;
  --knx-city-card-shadow: 1;

  /* Title */
  --knx-city-title-font-size: 48px;
  --knx-city-title-font-weight: 900;
  --knx-city-title-line-height: 1.02;
  --knx-city-title-letter-spacing: -0.5px;
  --knx-city-title-fill: #FFFFFF;
  --knx-city-title-stroke-color: #083B58;
  --knx-city-title-stroke-width: 4px;

  /* CTA */
  --knx-city-cta-bg: #083B58;
  --knx-city-cta-text: #FFFFFF;
  --knx-city-cta-radius: 999px;
  --knx-city-cta-border-color: #FFFFFF;
  --knx-city-cta-border-width: 6px;
  --knx-city-cta-padding-y: 14px;
  --knx-city-cta-padding-x: 26px;
  --knx-city-cta-font-size: 18px;
  --knx-city-cta-font-weight: 800;
  --knx-city-cta-dotted: 1;
  --knx-city-cta-two-lines: 1;

  /* Ensure wrapper never creates “frames” */
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
}

/* Card */
.knx-city-banner-card{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  width: 100%;
  min-height: var(--knx-city-card-min-height);
  padding: var(--knx-city-card-padding-y) var(--knx-city-card-padding-x);
  border-radius: var(--knx-city-card-radius);

  background: linear-gradient(
    var(--knx-city-grad-angle),
    var(--knx-city-grad-from) 0%,
    var(--knx-city-grad-to) 100%
  );

  text-decoration: none;
  color: #fff;

  overflow: hidden;
  box-sizing: border-box;

  box-shadow: none;
}

.knx-city-grid-wrap[data-preview="1"] .knx-city-banner-card{
  max-width: 520px;
  margin: 0 auto;
}

.knx-city-grid-wrap .knx-city-banner-card{
  box-shadow: calc(var(--knx-city-card-shadow) * 1px) 10px 24px rgba(17,24,39,0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.knx-city-grid-wrap .knx-city-banner-card:hover{
  transform: translateY(-3px);
  box-shadow: calc(var(--knx-city-card-shadow) * 1px) 18px 40px rgba(17,24,39,0.10);
}

.knx-city-banner-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.knx-city-banner-title{
  font-weight: var(--knx-city-title-font-weight);
  font-size: var(--knx-city-title-font-size);
  line-height: var(--knx-city-title-line-height);
  letter-spacing: var(--knx-city-title-letter-spacing);
  color: var(--knx-city-title-fill);

  -webkit-text-stroke: var(--knx-city-title-stroke-width) var(--knx-city-title-stroke-color);
  text-shadow:
    -1px -1px 0 var(--knx-city-title-stroke-color),
     1px -1px 0 var(--knx-city-title-stroke-color),
    -1px  1px 0 var(--knx-city-title-stroke-color),
     1px  1px 0 var(--knx-city-title-stroke-color);

  padding: 0 10px;
  max-width: 100%;
  box-sizing: border-box;
}

/* CTA */
.knx-city-banner-cta{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: var(--knx-city-cta-bg);
  color: var(--knx-city-cta-text);
  border-radius: var(--knx-city-cta-radius);
  border-color: var(--knx-city-cta-border-color);
  border-width: var(--knx-city-cta-border-width);
  border-style: solid;

  padding: var(--knx-city-cta-padding-y) var(--knx-city-cta-padding-x);

    /* Reduce CTA text modestly by default so it isn't oversized on desktop.
      Use 65% of the configured size but never below 12px for legibility. */
    font-size: max(12px, calc(var(--knx-city-cta-font-size) * 0.65));
  font-weight: var(--knx-city-cta-font-weight);
  line-height: 1.06;

  box-shadow: 0 10px 22px rgba(11,22,30,0.10);
}

.knx-city-banner-cta[data-dotted="1"]{
  border-style: dotted;
}

.knx-city-banner-cta[data-two-lines="0"]{
  flex-direction: row;
  white-space: nowrap;
}

.knx-city-banner-cta .knx-city-cta-line{
  display: block;
}

/* Responsive breakpoints: mobile, tablet, desktop */

/* Mobile: up to 480px */
@media (max-width: 480px) {
  .knx-city-banner-card{
    min-height: calc(var(--knx-city-card-min-height) - 36px);
    padding: calc(var(--knx-city-card-padding-y) - 12px) calc(var(--knx-city-card-padding-x) - 8px);
  }

  .knx-city-banner-title{
    /* Slightly larger mobile title baseline so it isn't too small on narrow screens.
       Keep the max tied to the configured size but prefer a modest reduction. */
    font-size: clamp(14px, calc(var(--knx-city-title-font-size) - 8px), var(--knx-city-title-font-size));
     /* On small viewports the stroke can bleed into glyph counters — remove the stroke
       and simulate an outline using subtle text-shadow layers for better legibility. */
     -webkit-text-stroke: 0px var(--knx-city-title-stroke-color);
     text-shadow:
      0.6px 0.6px 0 var(--knx-city-title-stroke-color),
      -0.6px -0.6px 0 var(--knx-city-title-stroke-color),
      0.6px -0.6px 0 var(--knx-city-title-stroke-color),
      -0.6px 0.6px 0 var(--knx-city-title-stroke-color);
  }

  .knx-city-banner-cta{
    /* Mobile: compact but a bit more legible than before */
    font-size: max(12px, calc(var(--knx-city-cta-font-size) * 0.75));
    padding: calc(var(--knx-city-cta-padding-y) * 0.80) calc(var(--knx-city-cta-padding-x) * 0.80);
    border-width: calc(var(--knx-city-cta-border-width) * 0.80);
  }
}

/* Tablet: 481px — 1024px */
@media (min-width: 481px) and (max-width: 1024px) {
  .knx-city-banner-card{
    min-height: calc(var(--knx-city-card-min-height) - 24px);
    padding: calc(var(--knx-city-card-padding-y) - 8px) calc(var(--knx-city-card-padding-x) - 6px);
  }

  .knx-city-banner-title{
    /* Tablet: moderate reduction but keep titles comfortably readable */
    font-size: clamp(16px, calc(var(--knx-city-title-font-size) - 10px), var(--knx-city-title-font-size));
    /* Reduce stroke slightly on tablet to avoid heavy inner fills; keep a gentle outline
       and slightly tighter shadow for depth. */
    -webkit-text-stroke: clamp(0px, calc(var(--knx-city-title-stroke-width) - 1px), var(--knx-city-title-stroke-width));
    text-shadow:
      0.8px 0.8px 0 var(--knx-city-title-stroke-color),
      -0.8px -0.8px 0 var(--knx-city-title-stroke-color),
      0.8px -0.8px 0 var(--knx-city-title-stroke-color),
      -0.8px 0.8px 0 var(--knx-city-title-stroke-color);
  }

  .knx-city-banner-cta{
    /* Tablet: moderate reduction */
    font-size: max(12px, calc(var(--knx-city-cta-font-size) * 0.78));
    padding: calc(var(--knx-city-cta-padding-y) * 0.85) calc(var(--knx-city-cta-padding-x) * 0.85);
    border-width: calc(var(--knx-city-cta-border-width) * 0.85);
  }
}

/* Desktop: 1025px and up — ensure CTA isn't oversized on narrow desktops */
@media (min-width: 1025px) {
  .knx-city-banner-card{
    /* keep defaults or slightly tighten for very wide layouts */
    min-height: var(--knx-city-card-min-height);
    padding: var(--knx-city-card-padding-y) var(--knx-city-card-padding-x);
  }

  .knx-city-banner-title{
    font-size: var(--knx-city-title-font-size);
    -webkit-text-stroke: var(--knx-city-title-stroke-width) var(--knx-city-title-stroke-color);
  }

  .knx-city-banner-cta{
    /* Desktop: slightly reduce to avoid oversized appearance */
    font-size: max(12px, calc(var(--knx-city-cta-font-size) * 0.50));
    padding: calc(var(--knx-city-cta-padding-y) * 0.90) calc(var(--knx-city-cta-padding-x) * 0.90);
    border-width: calc(var(--knx-city-cta-border-width) * 0.90);
  }
}