/* Villa availability catalogue -- real table look. Scoped to #villas-en-venta.s07--table (specificity 1,2,0) so it wins over the existing #villas-en-venta ... rules (1,1,0) in the critical inline block and in full-direct-20261021.css without touching pages that lack the marker class. Below 1024px nothing here applies and the accordion takes over. Column model (8 tracks, mirrors the design mock): 1 Villa 2 Estado 3 Dorm. 4 Banos 5 Construidos 6 Parcela 7 Precio 8 Acciones Cells are placed by explicit grid-column, never by document order, so a row without a price, without a second action or without bedroom counts (the two Premium villas) leaves an empty cell instead of pulling the rest of the row. */ /* ---- always on: the per-value spans must read as plain text in list/card mode ---- */ #villas-en-venta .s07__thead{display:none} #villas-en-venta .villa-list__meta .vl{position:relative} #villas-en-venta .villa-list__meta em{font-style:normal} @media (min-width:1024px){ @supports (grid-template-columns:subgrid){ /* ---------- grid ---------- */ #villas-en-venta.s07--table .s07__cards{ display:grid; grid-template-columns: minmax(130px,1.55fr) /* Villa */ minmax(112px,1.15fr) /* Estado */ minmax(54px,.6fr) /* Dorm. */ minmax(54px,.6fr) /* Banos */ minmax(88px,.9fr) /* Construidos */ minmax(88px,.9fr) /* Parcela */ minmax(118px,1.15fr) /* Precio */ minmax(168px,1.7fr); /* Acciones */ column-gap:clamp(10px,1.1vw,22px); row-gap:0; align-items:center; border-top:0; } /* ---------- header row ---------- */ #villas-en-venta.s07--table .s07__thead{ grid-column:1/-1;display:grid;grid-template-columns:subgrid; column-gap:inherit;align-items:end; padding:0 8px 11px; border-bottom:1px solid rgba(255,255,255,.17); } #villas-en-venta.s07--table .s07__thead > span{ font-family:var(--font-sans); font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase; color:rgba(255,255,255,.46);line-height:1.2;white-space:nowrap; } #villas-en-venta.s07--table .s07__thead > span:nth-child(3), #villas-en-venta.s07--table .s07__thead > span:nth-child(4){text-align:center} #villas-en-venta.s07--table .s07__thead > span:nth-child(5), #villas-en-venta.s07--table .s07__thead > span:nth-child(6), #villas-en-venta.s07--table .s07__thead > span:nth-child(7), #villas-en-venta.s07--table .s07__thead > span:nth-child(8){text-align:right} /* ---------- rows ---------- */ #villas-en-venta.s07--table .s07__card{ grid-column:1/-1;display:grid;grid-template-columns:subgrid; align-items:center;position:relative; min-height:60px;padding:14px 8px; background:transparent;border:0; border-bottom:1px solid rgba(255,255,255,.085); transition:background-color .22s var(--ease); } #villas-en-venta.s07--table .s07__card:last-child{border-bottom-color:rgba(255,255,255,.17)} #villas-en-venta.s07--table .s07__card:hover{ background:rgba(255,255,255,.035);transform:none; border-bottom-color:rgba(255,255,255,.085); } #villas-en-venta.s07--table .s07__card-body, #villas-en-venta.s07--table .s07__card-body>.s07__intro, #villas-en-venta.s07--table .villa-list__meta{display:contents} /* ---------- 1. Villa ---------- */ #villas-en-venta.s07--table .s07__card-body h3{ grid-column:1;margin:0;white-space:nowrap; font-family:var(--font-serif);font-size:21px;font-weight:400; letter-spacing:-.01em;line-height:1.2;color:var(--white); } #villas-en-venta.s07--table .s07__card-body h3 a{color:inherit;transition:color .2s var(--ease)} #villas-en-venta.s07--table .s07__card-body h3 a:hover{color:var(--gold-light)} /* ---------- 2. Estado (pills) ---------- */ #villas-en-venta.s07--table .s07__card-body>[data-villa-status]{ grid-column:2;margin:0;position:relative; } #villas-en-venta.s07--table .s07__card-body>[data-villa-status] strong{ display:inline-flex;align-items:center;max-width:100%; padding:6px 10px;border-radius:999px; font-family:var(--font-sans);font-size:9.5px;font-weight:600; letter-spacing:.08em;line-height:1.25;text-transform:uppercase; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #villas-en-venta.s07--table .s07__card-body>[data-villa-status="available"] strong{ color:#9dd3a2;background:#1d3424;box-shadow:inset 0 0 0 1px #33593c; } #villas-en-venta.s07--table .s07__card-body>[data-villa-status="reserved"] strong{ color:#e4c47d;background:#3b2c19;box-shadow:inset 0 0 0 1px #67502b; } #villas-en-venta.s07--table .s07__card-body>[data-villa-status="sold"] strong{ color:#dd958d;background:#382321;box-shadow:inset 0 0 0 1px #6b3f3b; } /* the pilot-villa footnote belongs to the card view; it would make this row two lines tall, so it is kept for assistive tech and hidden visually */ #villas-en-venta.s07--table .villa-list__note{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap; } /* ---------- 3-6. specs ---------- */ #villas-en-venta.s07--table .villa-list__meta>.vl{ font-family:var(--font-sans);font-size:13.5px;font-weight:300; line-height:1.3;color:rgba(255,255,255,.8);white-space:nowrap; } #villas-en-venta.s07--table .villa-list__meta>.vl--beds{grid-column:3;text-align:center} #villas-en-venta.s07--table .villa-list__meta>.vl--baths{grid-column:4;text-align:center} #villas-en-venta.s07--table .villa-list__meta>.vl--built{grid-column:5;text-align:right} #villas-en-venta.s07--table .villa-list__meta>.vl--plot{grid-column:6;text-align:right} /* unit words stay in the accessibility tree, the column header carries them visually */ #villas-en-venta.s07--table .villa-list__meta em{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap; } #villas-en-venta.s07--table .villa-list__meta>.vl-sep{display:none} /* ---------- 7. Precio ---------- */ /* The tax suffix is a word in several languages ("zzgl. MwSt.", "+ btw"), which makes the price up to 40px wider than the column. It wraps after the non-breaking space that holds the amount and the currency together, so the second line is the suffix alone and the row keeps its 60px. */ #villas-en-venta.s07--table .villa-list__price{ grid-column:7;margin:0;justify-self:end;text-align:right; white-space:normal; font-family:var(--font-sans);font-size:14px;font-weight:400; line-height:1.1;color:var(--white); } /* rows with no price keep an em dash so the column never looks broken */ #villas-en-venta.s07--table .s07__card:not(:has(.villa-list__price))::after{ content:"\2014";grid-area:1/7;justify-self:end; font-family:var(--font-sans);font-size:14px;color:rgba(255,255,255,.3); } /* ---------- 8. Acciones ---------- */ #villas-en-venta.s07--table .villa-list__links{ grid-column:8;display:flex;justify-content:flex-end;align-items:center; gap:8px;margin:0;flex-wrap:nowrap; } #villas-en-venta.s07--table .villa-list__links>.s07__all{ display:inline-flex;align-items:center;justify-content:center; min-height:0;padding:7px 12px;border:1px solid rgba(255,255,255,.2); border-radius:2px; font-family:var(--font-sans);font-size:9.5px;font-weight:500; letter-spacing:.12em;text-transform:uppercase;white-space:nowrap; color:rgba(255,255,255,.86);background:transparent; transition:border-color .22s var(--ease),color .22s var(--ease),background-color .22s var(--ease); } #villas-en-venta.s07--table .villa-list__links>.s07__all:hover{ border-color:var(--gold);color:var(--gold-light);background:var(--gold-10); } /* the second action is the booking CTA: solid gold on every row that has one */ #villas-en-venta.s07--table .villa-list__links>.s07__all:nth-child(2){ border-color:var(--gold);background:var(--gold);color:#0e0e0e; } #villas-en-venta.s07--table .villa-list__links>.s07__all:nth-child(2):hover{ border-color:var(--gold-light);background:var(--gold-light);color:#0e0e0e; } /* rows with no actions at all keep the column from looking broken */ #villas-en-venta.s07--table .s07__card:not(:has(.villa-list__links))::before{ content:"\2014";grid-area:1/8;justify-self:end; font-family:var(--font-sans);font-size:14px;color:rgba(255,255,255,.3); } } } /* ===================================================================== Section header. The counters become the same pills the Estado column uses, so the head doubles as the table's legend; the price CTA becomes a real button in the same family as the row actions, and a hairline over the column labels closes the head off. All of it is scoped to .s07--table, so the other seven languages keep the old header until the design is rolled out. ===================================================================== */ #villas-en-venta.s07--table .s07__header{ align-items:end; gap:clamp(26px,4vw,72px); margin-bottom:clamp(22px,2.4vw,32px); } @media (min-width:741px){ #villas-en-venta.s07--table .s07__header{ grid-template-columns:minmax(0,1fr) auto; } } #villas-en-venta.s07--table .s07__header-main{min-width:0} #villas-en-venta.s07--table .s07__title{ margin-top:14px; font-size:clamp(34px,3.4vw,50px); line-height:1.06;letter-spacing:-.022em; text-wrap:balance; } /* ---- counters as legend pills ---- */ #villas-en-venta.s07--table .s07__catalog-meta{ display:flex;flex-wrap:wrap;align-items:center; gap:8px 10px;margin:20px 0 0; } #villas-en-venta.s07--table .s07__stat{ display:inline-flex;align-items:center;gap:7px; padding:5px 12px 5px 10px;border-radius:999px; font-family:var(--font-sans);font-size:11px;font-weight:400; letter-spacing:.03em;line-height:1.35;white-space:nowrap; } #villas-en-venta.s07--table .s07__stat::before{ content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%; } #villas-en-venta.s07--table .s07__stat b{font-weight:600} #villas-en-venta.s07--table .s07__stat--available{ color:#9dd3a2;background:#1d3424;box-shadow:inset 0 0 0 1px #33593c; } #villas-en-venta.s07--table .s07__stat--available::before{background:#6fc97d} #villas-en-venta.s07--table .s07__stat--sold{ color:#dd958d;background:#382321;box-shadow:inset 0 0 0 1px #6b3f3b; } #villas-en-venta.s07--table .s07__stat--sold::before{background:#d9736a} #villas-en-venta.s07--table .s07__catalog-meta time{ margin-left:6px;color:rgba(255,255,255,.5); font-size:12px;font-weight:300;letter-spacing:.02em; } /* no separator glyph before the date: it orphans onto its own line when the counters wrap, which they do on phones and in the narrow left column */ /* ---- lede: sits under the title, above the counters ---- */ #villas-en-venta.s07--table .s07__lede{ margin:17px 0 0;max-width:min(100%,660px); font-size:13.5px;font-weight:300;line-height:1.78; color:rgba(255,255,255,.7); } /* ---- right cell: the price CTA alone, pinned to the table's right edge ---- */ #villas-en-venta.s07--table .s07__header .s07__intro{ display:flex;flex-direction:column;align-items:flex-start;gap:20px; } @media (min-width:741px){ #villas-en-venta.s07--table .s07__header .s07__intro{align-items:flex-end} } /* ---- price CTA: same button language as the row actions ---- */ #villas-en-venta.s07--table .s07__header .s07__all{ display:inline-flex;align-items:center; padding:11px 17px;border:1px solid var(--gold);border-radius:2px; background:var(--gold-10);color:var(--gold-light); font-family:var(--font-sans);font-size:10px;font-weight:500; letter-spacing:.14em;text-transform:uppercase;white-space:nowrap; transition:background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease); } #villas-en-venta.s07--table .s07__header .s07__all:hover{ background:var(--gold);border-color:var(--gold);color:#0e0e0e; } /* ---- hairline that closes the head off above the column labels ---- */ @media (min-width:1024px){ @supports (grid-template-columns:subgrid){ #villas-en-venta.s07--table .s07__header{ margin-bottom:0; padding-bottom:clamp(20px,2.1vw,30px); border-bottom:1px solid rgba(255,255,255,.1); } #villas-en-venta.s07--table .s07__thead{padding-top:14px} } } /* ===================================================================== Below 1024px the eight columns stop fitting, so every row becomes a card inside the
accordion. The markup does not change: the per-value spans that are table cells on desktop become label/value pairs here, with the unit word in promoted to the label (order:-1), which also keeps every label translatable instead of generated from CSS. ===================================================================== */ @media (max-width:1023px){ /* ---- status pills, same palette as the Estado column ---- */ #villas-en-venta.s07--table .s07__card-body [data-villa-status] strong{ display:inline-flex;align-items:center; padding:6px 10px;border-radius:999px; font-family:var(--font-sans);font-size:9.5px;font-weight:600; letter-spacing:.08em;line-height:1.25;text-transform:uppercase; } #villas-en-venta.s07--table .s07__card-body [data-villa-status="available"] strong{ color:#9dd3a2;background:#1d3424;box-shadow:inset 0 0 0 1px #33593c; } #villas-en-venta.s07--table .s07__card-body [data-villa-status="reserved"] strong{ color:#e4c47d;background:#3b2c19;box-shadow:inset 0 0 0 1px #67502b; } #villas-en-venta.s07--table .s07__card-body [data-villa-status="sold"] strong{ color:#dd958d;background:#382321;box-shadow:inset 0 0 0 1px #6b3f3b; } /* ---- specs: label above value, all four in one row ---- The four columns keep the same reading order as the table, so the card is a narrower version of the same thing rather than a different layout. Type and gaps scale with the viewport because "DORMITORIOS" and "CONSTRUIDOS" are the widest labels on the page and a 320px phone leaves each column about 55px. ---- */ #villas-en-venta.s07--table .villa-list__meta{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px clamp(5px,1.8vw,16px);margin:0;min-width:0; } #villas-en-venta.s07--table .villa-list__meta>.vl{ display:flex;flex-direction:column;gap:3px;min-width:0; font-family:var(--font-sans);font-size:clamp(13px,3.6vw,15px);font-weight:400; line-height:1.25;color:var(--white);white-space:nowrap; } /* The value never breaks, but the label may: translations run much longer than the Spanish one ("salles de bains", "celkové plochy", "площадь дома") and would otherwise run into the next column. */ #villas-en-venta.s07--table .villa-list__meta>.vl em{ order:-1;font-style:normal;white-space:normal; font-size:clamp(7px,2.1vw,9px);font-weight:500;line-height:1.25; letter-spacing:.03em;text-transform:uppercase; color:rgba(255,255,255,.42); } #villas-en-venta.s07--table .villa-list__meta>.vl-sep{display:none} /* ---- action buttons ---- */ #villas-en-venta.s07--table .villa-list__links{display:flex;gap:10px;margin:0} #villas-en-venta.s07--table .villa-list__links>.s07__all{ display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:0 15px; border:1px solid rgba(255,255,255,.2);border-radius:2px; font-family:var(--font-sans);font-size:10px;font-weight:500; letter-spacing:.13em;text-transform:uppercase;white-space:nowrap; color:rgba(255,255,255,.86);background:transparent; } #villas-en-venta.s07--table .villa-list__links>.s07__all:nth-child(2){ border-color:var(--gold);background:var(--gold);color:#0e0e0e; } } /* ---------------- <=1023px: the accordion ---------------- */ @media (max-width:1023px){ #villas-en-venta.s07--table .s07__cards{gap:10px;border-top:0} #villas-en-venta.s07--table .s07__card{ background:rgba(255,255,255,.022); border:1px solid rgba(255,255,255,.09);border-radius:3px; transform:none; } #villas-en-venta.s07--table .s07__card-body{padding:0 16px} /* summary: name and status pill on one line, price under them */ #villas-en-venta.s07--table .noa-mobile-disclosure--villa>summary{ grid-template-columns:minmax(0,1fr) auto; align-items:center;column-gap:12px;row-gap:9px; padding:15px 32px 15px 0; } #villas-en-venta.s07--table .noa-mobile-disclosure--villa>summary::after{ top:16px;font-size:21px;color:rgba(255,255,255,.45); } /* The serif comes from the CSP-hashed inline block, which stops at 740px, so above that the name fell back to the body sans. Re-stated here it holds across the whole accordion range and matches the table's own villa names. */ #villas-en-venta.s07--table .noa-mobile-disclosure--villa>summary>.noa-mobile-summary-title{ grid-area:1/1;font-family:'Playfair Display',serif; font-size:22px;line-height:1.18; } /* span 2 is the status, span 3 the price (span 1 is the name) */ #villas-en-venta.s07--table .noa-mobile-disclosure--villa>summary>.noa-mobile-summary-value:nth-of-type(2){ grid-area:1/2;justify-self:end; display:inline-flex;align-items:center; padding:6px 10px;border-radius:999px; font-family:var(--font-sans);font-size:9.5px;font-weight:600; letter-spacing:.08em;line-height:1.25;text-transform:uppercase;white-space:nowrap; } #villas-en-venta.s07--table .noa-mobile-disclosure--villa:has([data-villa-status="available"])>summary>.noa-mobile-summary-value:nth-of-type(2){ color:#9dd3a2;background:#1d3424;box-shadow:inset 0 0 0 1px #33593c; } #villas-en-venta.s07--table .noa-mobile-disclosure--villa:has([data-villa-status="reserved"])>summary>.noa-mobile-summary-value:nth-of-type(2){ color:#e4c47d;background:#3b2c19;box-shadow:inset 0 0 0 1px #67502b; } #villas-en-venta.s07--table .noa-mobile-disclosure--villa:has([data-villa-status="sold"])>summary>.noa-mobile-summary-value:nth-of-type(2){ color:#dd958d;background:#382321;box-shadow:inset 0 0 0 1px #6b3f3b; } #villas-en-venta.s07--table .noa-mobile-disclosure--villa>summary>.noa-mobile-summary-value:nth-of-type(3){ grid-area:2/1/auto/-1; font-family:var(--font-sans);font-size:16px;font-weight:400;color:var(--white); } /* a sold villa has no price, so span 3 holds the spec line instead -- that belongs in the body, next to its labels, not in the collapsed summary */ #villas-en-venta.s07--table .noa-mobile-disclosure--villa:not(:has(.villa-list__price))>summary>.noa-mobile-summary-value:nth-of-type(3){display:none} /* body: specs grid, then the buttons */ #villas-en-venta.s07--table .noa-mobile-content{ display:flex;flex-direction:column;gap:16px;padding:2px 0 18px; } #villas-en-venta.s07--table .noa-mobile-content>.s07__intro{display:contents} #villas-en-venta.s07--table .noa-mobile-content>.s07__intro>.villa-list__meta{display:grid} #villas-en-venta.s07--table .noa-mobile-content>.s07__intro>.villa-list__price{display:none} #villas-en-venta.s07--table .noa-mobile-content .villa-list__links{flex-wrap:wrap} #villas-en-venta.s07--table .noa-mobile-content .villa-list__links>.s07__all{flex:1 1 132px} /* a sold villa has only "Planos": a full-width button would shout louder than it should */ #villas-en-venta.s07--table .noa-mobile-content .villa-list__links>.s07__all:only-child{flex:0 1 auto;min-width:152px} #villas-en-venta.s07--table .villa-list__note{ margin:0;font-size:12px;line-height:1.45;color:rgba(255,255,255,.55); } } /* ===================================================================== Structural rules for the
accordion. The originals live in the inline