/* Available Units. Enqueued by lumoria_enqueue_template_styles() in
   functions.php, alongside single-lumoria_project.css on the unit-type detail
   view -- that page reuses the property page's blocks verbatim, so everything
   here is only what those blocks do not already cover. */

  .lum-utypes, .lum-utypes * { box-sizing: border-box; }
  /* The filter script hides cards and card rows with the `hidden` attribute.
     An author `display` declaration outranks the browser's own
     `[hidden] { display: none }` whatever its specificity, and the cards, the
     location line, the facts and the price are all flex, so the rule has to be
     restated here or hiding them would have no effect at all. */
  .lum-utypes [hidden] { display: none !important; }
  .lum-utypes {
    --ut-mint: #44BDA1;
    --ut-mint-dark: #168B72;
    --ut-ink: #04272F;
    --ut-copy: rgba(4,39,47,.68);
    --ut-line: rgba(4,39,47,.12);
    padding: clamp(58px, 7vw, 96px) 0;
    background: #FBFAF8;
    color: var(--ut-ink);
    font-family: var(--font-body);
  }
  .lum-utypes-shell {
    width: 100%;
    max-width: var(--container-w);
    margin: 0 auto;
    padding-inline: clamp(20px, 4vw, 48px);
  }

  /* ---------------- HEADING ---------------- */
  .lum-utypes-head {
    display: grid;
    grid-template-columns: minmax(0, 780px) auto;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 34px;
  }
  .lum-utypes-eyebrow {
    display: inline-flex;
    margin-bottom: 16px;
    padding: 8px 17px;
    border: 1px solid rgba(68,189,161,.42);
    border-radius: 999px;
    background: rgba(68,189,161,.07);
    color: var(--ut-mint-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .lum-utypes-title {
    margin: 0 0 13px;
    font-family: var(--font-display);
    font-size: var(--text-h2);
    line-height: 1.1;
    letter-spacing: var(--ls-h2);
  }
  .lum-utypes-intro {
    max-width: 690px;
    margin: 0;
    color: var(--ut-copy);
    font-size: 16px;
    line-height: 1.7;
  }
  .lum-utypes-vacant {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--ut-mint);
    box-shadow: 0 5px 12px rgba(4,39,47,.12);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }
  .lum-utypes-vacant::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,.22);
  }

  /* Shown when a URL asks for a category that no longer has vacant units. */
  .lum-utypes-notice {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 26px;
    padding: 15px 19px;
    border: 1px solid rgba(68,189,161,.35);
    border-radius: 14px;
    background: rgba(68,189,161,.08);
    color: var(--ut-mint-dark);
    font-size: 15px;
  }

  /* ---------------- FILTER BAR ----------------
     The same component the Properties page uses, adapted to unit types. */
  .lum-utypes .lum-units-filters {
    display: grid;
    grid-template-columns: 1fr 1fr .9fr .8fr .9fr 1.3fr auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 26px;
    padding: 19px;
    border: 1px solid var(--ut-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(4,39,47,.055);
  }
  .lum-utypes .lum-units-field label {
    display: block;
    margin: 0 0 7px;
    color: var(--ut-copy);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .lum-utypes .lum-units-field select,
  .lum-utypes .lum-units-field input {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid var(--ut-line);
    border-radius: 11px;
    color: var(--ut-ink);
    background: #fff;
    font: inherit;
    outline: 0;
  }
  .lum-utypes .lum-units-field select:focus,
  .lum-utypes .lum-units-field input:focus {
    border-color: var(--ut-mint);
    box-shadow: 0 0 0 3px rgba(68,189,161,.12);
  }
  .lum-utypes .lum-units-reset {
    height: 46px;
    padding: 0 18px;
    border: 1px solid var(--ut-line);
    border-radius: 999px;
    color: var(--ut-ink);
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .25s ease, color .25s ease;
  }
  .lum-utypes .lum-units-reset:hover {
    border-color: var(--ut-mint);
    color: var(--ut-mint);
  }

  /* ---------------- CATEGORY CARDS ---------------- */
  .lum-utypes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .lum-utype-card {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(29,18,53,.05);
    overflow: hidden;
  }
  /* The cards fade in one after another, so each carries its own delay on top
     of the shared .reveal transition. */
  .lum-utype-card.reveal { transition-delay: var(--card-delay, 0s); }
  .lum-utype-card:hover { box-shadow: 0 22px 44px -20px rgba(29,18,53,.22); }
  .lum-utype-card.reveal.is-visible:hover { transform: translateY(-3px); }

  .lum-utype-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 11;
    background: linear-gradient(135deg, rgba(68,189,161,.18), rgba(4,39,47,.1));
    overflow: hidden;
  }
  .lum-utype-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
  }
  .lum-utype-card:hover .lum-utype-media img { transform: scale(1.05); }
  .lum-utype-media-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: rgba(4,39,47,.28);
    font-size: 40px;
  }
  .lum-utype-badge {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-start: 14px;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--ut-mint);
    box-shadow: 0 4px 10px rgba(4,39,47,.18);
    color: #fff;
    font-size: 12.5px;
    font-weight: 650;
    white-space: nowrap;
  }

  .lum-utype-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 13px;
    padding: 22px;
  }
  .lum-utype-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: var(--fw-heading);
    line-height: 1.25;
  }
  .lum-utype-name a { color: inherit; text-decoration: none; }
  .lum-utype-name a:hover { color: var(--ut-mint-dark); }

  .lum-utype-where {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    color: var(--ut-copy);
    font-size: 14px;
    line-height: 1.5;
  }
  .lum-utype-where i { margin-top: 3px; color: var(--ut-mint); flex-shrink: 0; }

  .lum-utype-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--ut-line);
    list-style: none;
  }
  .lum-utype-facts li { display: flex; flex-direction: column; gap: 3px; }
  .lum-utype-fact-label {
    color: var(--ut-copy);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .lum-utype-fact-value { font-size: 15px; font-weight: 650; }

  .lum-utype-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--ut-line);
  }
  /* The card's own display rules beat the hidden attribute, which left an
     empty "Size m²" and "From / month" on a card with no size or price (D18,
     C15). Anything hidden inside a card stays hidden. */
  .lum-utype-card [hidden] { display: none; }
  .lum-utype-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    color: var(--ut-copy);
    font-size: 12.5px;
  }
  .lum-utype-price strong { color: var(--ut-ink); font-size: 18px; font-weight: 750; }
  .lum-utype-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 17px;
    border-radius: 999px;
    background: rgba(68,189,161,.1);
    color: var(--ut-mint-dark);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .25s ease, color .25s ease;
  }
  .lum-utype-cta:hover { background: var(--ut-mint); color: #fff; }

  .lum-utypes-empty {
    margin: 0;
    padding: 60px 24px;
    border: 1px solid var(--ut-line);
    border-radius: 20px;
    background: #fff;
    color: var(--ut-copy);
    text-align: center;
  }
  /* The "nothing matched" line lives inside the grid, so it has to span it. */
  .lum-utypes-grid > .lum-utypes-empty { grid-column: 1 / -1; }

  @media (max-width: 1100px) {
    .lum-utypes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lum-utypes .lum-units-filters { grid-template-columns: 1fr 1fr 1fr; }
    .lum-utypes .lum-units-reset { width: 100%; }
  }
  @media (max-width: 1000px) {
    .lum-utypes-head { grid-template-columns: 1fr; }
    .lum-utypes-vacant { justify-self: start; }
    .lum-utypes .lum-units-filters { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 700px) {
    .lum-utypes { padding: 52px 0; }
    .lum-utypes-grid { grid-template-columns: 1fr; }
    .lum-utypes .lum-units-filters { grid-template-columns: 1fr; padding: 16px; }
    .lum-utype-foot { flex-direction: column; align-items: stretch; }
    .lum-utype-cta { justify-content: center; }
  }

  /* ============================================================
     UNIT TYPE DETAIL — additions to the property page's blocks.
     Everything not listed here is inherited from
     single-lumoria_project.css, which loads alongside this file.
     ============================================================ */

  /* Breadcrumb. The page has no banner, so the trail sits at the top of the
     content column. The separator is a slash, which reads the same in both
     directions, so nothing needs mirroring. */
  #lumCaseSec .lum-utype-crumbs { margin-bottom: 18px; }
  #lumCaseSec .lum-utype-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--lum-sub);
    font-size: 13.5px;
    line-height: 1.5;
  }
  #lumCaseSec .lum-utype-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
  #lumCaseSec .lum-utype-crumbs li + li::before {
    content: "/";
    color: rgba(4,39,47,.3);
  }
  #lumCaseSec .lum-utype-crumbs a {
    color: var(--lum-sub);
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
  }
  #lumCaseSec .lum-utype-crumbs a:hover { color: var(--lum-gold-dark); }
  #lumCaseSec .lum-utype-crumbs [aria-current="page"] { color: var(--lum-ink); font-weight: 600; }

  /* A page with a single option shows its figures in the property page's own
     key-figure cards (single-lumoria_project.css), unchanged. Only the Enquire
     button below them is added here: hidden while the enquiry form sits beside
     the content, shown once the sidebar stacks under it at 1100px. */
  #lumCaseSec .lum-utype-single-cta { display: none; }
  @media (max-width: 1100px) {
    #lumCaseSec .lum-case-stats.has-cta { margin-bottom: 18px; }
    #lumCaseSec .lum-utype-single-cta { display: block; margin: 0 0 52px; }
    #lumCaseSec .lum-utype-single-cta .lum-case-type-cta { padding: 12px 26px; font-size: 14.5px; }
  }
  @media (max-width: 640px) {
    #lumCaseSec .lum-utype-single-cta { margin-bottom: 36px; }
    #lumCaseSec .lum-utype-single-cta .lum-case-type-cta { justify-content: center; width: 100%; }
  }


  /* Units are cards built on the property page's apartment-type card
     (.lum-case-type-*, single-lumoria_project.css). Only the building line and
     the filter's hidden and empty states are added here. */
  /* auto-fill, not the property page's auto-fit: auto-fit collapses the empty
     tracks, so a category with one offer stretched its card across the whole
     column. auto-fill keeps the tracks, so a lone card stays card-sized.
     Doubled class on purpose: single-lumoria_project.css loads after this
     file, so its #lumCaseSec .lum-case-types rule would otherwise win. */
  #lumCaseSec .lum-case-types.lum-utype-offers {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 20px;
    margin-top: 24px;
  }
  @media (max-width: 520px) {
    #lumCaseSec .lum-case-types.lum-utype-offers { grid-template-columns: minmax(0, 1fr); }
  }
  /* .lum-case-type is display:flex, which outranks the browser's own
     [hidden] rule, so hiding a filtered card has to be restated. */
  #lumCaseSec .lum-utype-offers > [hidden] { display: none; }

  #lumCaseSec .lum-utype-offers .lum-case-type-card { border-radius: 16px; }
  #lumCaseSec .lum-utype-offers .lum-case-type-media { aspect-ratio: 3 / 2; }
  #lumCaseSec .lum-utype-offers .lum-case-type-name {
    inset-block-end: 12px;
    inset-inline: 16px;
    font-size: 18px;
  }
  #lumCaseSec .lum-utype-offers .lum-case-type-body { padding: 16px 16px 18px; }

  #lumCaseSec .lum-utype-offer-place {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 12px;
    line-height: 1.35;
  }
  #lumCaseSec .lum-utype-offer-place i { flex-shrink: 0; color: var(--lum-gold); font-size: 12px; }
  #lumCaseSec .lum-utype-building-link {
    color: var(--lum-ink);
    font-size: 15.5px;
    font-weight: var(--fw-semibold);
    text-decoration: none;
  }
  #lumCaseSec .lum-utype-building-link:hover { color: var(--lum-gold-dark); }
  #lumCaseSec .lum-utype-offer-area {
    display: block;
    margin-top: 2px;
    color: var(--lum-sub);
    font-size: 13px;
  }

  /* Size and layout as a quiet spec row rather than a labelled list. */
  #lumCaseSec .lum-utype-offer-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
  }
  #lumCaseSec .lum-utype-offer-specs li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(68,189,161,.09);
    color: var(--lum-ink);
    font-size: 12.5px;
    line-height: 1.3;
  }
  #lumCaseSec .lum-utype-offer-specs i { color: var(--lum-gold-dark); font-size: 11px; }

  #lumCaseSec .lum-utype-offers .lum-case-type-foot { padding-block-start: 14px; gap: 10px; }
  #lumCaseSec .lum-utype-offers .lum-case-type-price strong { font-size: 17px; }
  #lumCaseSec .lum-utype-offers .lum-case-type-cta { padding: 8px 15px; font-size: 13px; }
  #lumCaseSec .lum-utype-offers-empty {
    grid-column: 1 / -1;
    padding: 32px 20px;
    border: 1px dashed var(--lum-divider);
    border-radius: var(--lum-radius);
    color: var(--lum-sub);
    text-align: center;
  }

  #lumCaseSec .lum-utype-buildings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #lumCaseSec .lum-utype-building {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 12px;
    border: 1px solid var(--lum-divider);
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .25s ease, transform .25s ease;
  }
  #lumCaseSec .lum-utype-building:hover {
    box-shadow: 0 16px 32px -18px rgba(29,18,53,.28);
    transform: translateY(-2px);
  }
  #lumCaseSec .lum-utype-building-media {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: rgba(68,189,161,.12);
    overflow: hidden;
  }
  #lumCaseSec .lum-utype-building-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #lumCaseSec .lum-utype-building-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--lum-gold);
    font-size: 22px;
  }
  #lumCaseSec .lum-utype-building-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
  }
  #lumCaseSec .lum-utype-building-name {
    font-size: 15.5px;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
  }
  #lumCaseSec .lum-utype-building-loc {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--lum-sub);
    font-size: 13px;
  }
  #lumCaseSec .lum-utype-building-loc i { color: var(--lum-gold); font-size: 12px; flex-shrink: 0; }

  /* THE BUILDING -- a page about one building replaces the one-item
     "Buildings with this type" list with the building itself: photo, area,
     and the two ways onward, its own page and directions to it. */
  #lumCaseSec .lum-utype-bldg {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    border: 1px solid var(--lum-divider);
    border-radius: var(--lum-radius);
    background: #fff;
    overflow: hidden;
  }
  #lumCaseSec .lum-utype-bldg-media {
    display: block;
    min-height: 170px;
    background: rgba(68,189,161,.12);
  }
  #lumCaseSec .lum-utype-bldg-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #lumCaseSec .lum-utype-bldg-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 22px 24px;
  }
  #lumCaseSec .lum-utype-bldg-name { margin: 0; font-size: 20px; font-weight: var(--fw-semibold); line-height: 1.25; }
  #lumCaseSec .lum-utype-bldg-name a { color: var(--lum-ink); text-decoration: none; }
  #lumCaseSec .lum-utype-bldg-name a:hover { color: var(--lum-gold-dark); }
  #lumCaseSec .lum-utype-bldg-loc,
  #lumCaseSec .lum-utype-bldg-address {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    color: var(--lum-sub);
    font-size: 14px;
    line-height: 1.5;
  }
  #lumCaseSec .lum-utype-bldg-loc i { color: var(--lum-gold); font-size: 12px; }
  #lumCaseSec .lum-utype-bldg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
  }
  #lumCaseSec .lum-utype-bldg-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--lum-divider);
    border-radius: 999px;
    color: var(--lum-ink);
    font-size: 13.5px;
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
  }
  #lumCaseSec .lum-utype-bldg-btn:hover { border-color: var(--lum-gold); color: var(--lum-gold-dark); }
  #lumCaseSec .lum-utype-bldg-btn.is-primary { border-color: var(--lum-gold); background: var(--lum-gold); color: #fff; }
  #lumCaseSec .lum-utype-bldg-btn.is-primary:hover { border-color: var(--lum-gold-dark); background: var(--lum-gold-dark); color: #fff; }
  #lumCaseSec .lum-utype-bldg-btn i { font-size: 12px; }
  @media (max-width: 560px) {
    #lumCaseSec .lum-utype-bldg { grid-template-columns: minmax(0, 1fr); }
    #lumCaseSec .lum-utype-bldg-media { aspect-ratio: 16 / 9; min-height: 0; }
  }

  /* SAME TYPE IN OTHER BUILDINGS -- the way onward from a page narrowed to
     one building, so it is not a dead end. */
  #lumCaseSec .lum-utype-others {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #lumCaseSec .lum-utype-other {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 12px;
    border: 1px solid var(--lum-divider);
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  }
  #lumCaseSec .lum-utype-other:hover {
    border-color: rgba(68,189,161,.35);
    box-shadow: 0 16px 32px -18px rgba(29,18,53,.28);
    transform: translateY(-2px);
  }
  #lumCaseSec .lum-utype-other-media {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border-radius: 12px;
    background: rgba(68,189,161,.12);
    overflow: hidden;
  }
  #lumCaseSec .lum-utype-other-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
  #lumCaseSec .lum-utype-other-body { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
  #lumCaseSec .lum-utype-other-name { font-size: 15.5px; font-weight: var(--fw-semibold); line-height: 1.3; }
  #lumCaseSec .lum-utype-other-loc { display: flex; align-items: center; gap: 7px; color: var(--lum-sub); font-size: 13px; }
  #lumCaseSec .lum-utype-other-loc i { color: var(--lum-gold); font-size: 11px; }
  #lumCaseSec .lum-utype-other-meta { color: var(--lum-sub); font-size: 13px; }
  #lumCaseSec .lum-utype-other-meta strong { color: var(--lum-ink); font-weight: 700; }
  #lumCaseSec .lum-utype-other-go { flex-shrink: 0; color: var(--lum-gold); font-size: 13px; }
  #lumCaseSec .lum-utype-others-all { display: inline-block; margin-top: 16px; }
  @media (prefers-reduced-motion: reduce) {
    #lumCaseSec .lum-utype-other,
    #lumCaseSec .lum-utype-other:hover { transform: none; transition: none; }
  }