/* vn-floor-plans — Business "Pricing & Floor Plans"
   Source: Rest of pages/Responsive/Down to business (.fp-*): names 35px 600, drawings 387px tall,
   size 28px, price 35px 600. The Figma drawings are one image; each plan is a crop of it. */

.vn-plans {
    --vn-plans-rule: #C7DAF0;
    max-width: 1100px;
    padding: min(3vw, 58px) 0 0;
    font-family: var(--vn-font-body);
    color: var(--vn-navy);
}

.vn-plans__list {
    display: grid;
    grid-template-columns: repeat(var(--vn-plans-count, 3), minmax(0, 1fr));
    column-gap: min(1.5vw, 29px);
}

.vn-plans__plan {
    position: relative;
    display: grid;
    grid-auto-rows: auto;
    /* Plans are stretched to the tallest one; without this the spare height is shared
       out between the rows and each column's price lands at a different level. */
    align-content: start;
    justify-items: center;
    min-width: 0;
    text-align: center;
}

.vn-plans-rules-yes .vn-plans__plan + .vn-plans__plan::before {
    content: "";
    position: absolute;
    top: min(2.6vw, 50px);
    bottom: min(8.5vw, 163px);
    left: calc(-1 * min(0.75vw, 14.5px));
    width: 1px;
    background-color: var(--vn-plans-rule);
}

.vn-plans .vn-plans__name {
    margin: 0;
    font-family: var(--vn-font-body);
    font-size: min(1.82vw, 35px);
    font-weight: 600;
    line-height: 1.04;
    text-transform: uppercase;
    color: inherit;
}

.vn-plans__drawing {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: min(20.1vw, 387px);
    margin: min(0.73vw, 14px) 0 min(1.04vw, 20px);
}

/* The image fills the drawing box so Image Fit / Position controls can place the drawing in it */
.vn-plans .vn-plans__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: var(--vn-img-x, 50%) var(--vn-img-y, 50%);
}

/* Stand-in for a plan whose drawing hasn't been supplied yet */
.vn-plans .vn-plans__missing {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82%;
    height: 88%;
    padding: 16px;
    border: 1.5px dashed var(--vn-plans-rule);
    border-radius: 14px;
    background-color: var(--vn-mist-soft);
    font-size: min(1.05vw, 20px);
    font-style: italic;
    line-height: 1.35;
    text-align: center;
    opacity: 0.85;
}

/* Two lines are reserved so a type that wraps doesn't push one column's price out of line */
.vn-plans .vn-plans__type {
    min-height: 2.7em;
    margin: 0 0 min(0.3vw, 6px);
    font-size: min(1.25vw, 24px);
    font-weight: 600;
    line-height: 1.3;
}

.vn-plans .vn-plans__size {
    margin: 0;
    font-size: min(1.46vw, 28.09px);
    font-weight: 400;
    line-height: 1.3;
}

.vn-plans .vn-plans__price {
    margin: min(0.68vw, 13px) 0 0;
    font-size: min(1.82vw, 35px);
    font-weight: 600;
    line-height: 1.04;
    text-transform: uppercase;
}

.vn-plans .vn-plans__plannote {
    max-width: 24ch;
    margin: min(0.5vw, 10px) 0 0;
    font-size: min(0.94vw, 18px);
    font-style: italic;
    line-height: 1.35;
    opacity: 0.85;
}

.vn-plans .vn-plans__note {
    margin: 20px 0 0;
    font-size: min(1.1vw, 20px);
    font-style: italic;
}

/* Row alignment across plans: each plan borrows the list's six rows (name, drawing, type,
   size, price, note), so a type that wraps to three lines lowers that row for every plan
   instead of pushing one column's price out of line. The widget outputs every slot. */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 901px) {
        .vn-plans__list { grid-template-rows: repeat(6, auto); }
        .vn-plans__plan { grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
        .vn-plans .vn-plans__type { min-height: 0; }
    }
}

.vn-plans__plan > p:empty { margin: 0; }

@media (max-width: 1024px) {
    .vn-plans { max-width: none; padding-top: 0; }
    .vn-plans__list { column-gap: 24px; }
    .vn-plans-rules-yes .vn-plans__plan + .vn-plans__plan::before { display: none; }
    .vn-plans .vn-plans__name { font-size: clamp(1.05rem, 2.4vw, 1.5rem); line-height: 1.2; letter-spacing: 0.02em; }
    .vn-plans__drawing { height: auto; max-width: 280px; margin: 14px 0 12px; }
    .vn-plans .vn-plans__img { width: 100%; height: auto; }
    .vn-plans .vn-plans__missing { width: 100%; height: auto; aspect-ratio: 3 / 4; font-size: 1rem; }
    /* Drawings are width-scaled here, so reserving a line for the type buys no alignment */
    .vn-plans .vn-plans__type { min-height: 0; font-size: clamp(0.95rem, 1.9vw, 1.15rem); }
    .vn-plans .vn-plans__plannote { max-width: 34ch; font-size: 0.9rem; }
    .vn-plans .vn-plans__size { font-size: clamp(0.98rem, 1.9vw, 1.2rem); }
    .vn-plans .vn-plans__price { margin-top: 6px; font-size: clamp(1.05rem, 2.3vw, 1.45rem); line-height: 1.2; }
    .vn-plans .vn-plans__note { font-size: 0.95rem; }
}

@media (max-width: 900px) {
    .vn-plans__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}

@media (max-width: 640px) {
    .vn-plans__list { grid-template-columns: 1fr; row-gap: 34px; }
    .vn-plans__drawing { max-width: 300px; }
}