/* LivingLink Algarve — listing pages.
   One stylesheet for every business-*.html. The pages carry no <style> block
   of their own: colour, type and spacing come from styles.css tokens, this
   file only adds the parts a listing page needs on top of them. */

/* ---------- breadcrumb inside the hero ---------- */
.lcrumb{
  font-family:var(--caps);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,241,230,.6);margin:0 0 18px}
.lcrumb a{color:rgba(246,241,230,.78);text-decoration:none;border-bottom:1px solid transparent}
.lcrumb a:hover{color:var(--gold-soft,#CBAA54);border-bottom-color:currentColor}
.lcrumb .sep{opacity:.45;padding:0 .5em}

/* ---------- distinction line under the title ---------- */
.lbadge{
  display:inline-block;margin-top:16px;padding:5px 13px;
  font-family:var(--caps);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-soft,#CBAA54);border:1px solid rgba(203,170,84,.55);border-radius:2px}

/* ---------- fact strip: unconfirmed values stay visibly open ---------- */
.lfacts .lfv.pending{color:var(--muted);font-family:var(--font-sans);font-size:.95rem;font-weight:400}

/* ---------- body ---------- */
.lmain{padding:54px 0 92px}
.lbody h3{font-family:var(--font-serif);font-weight:600;color:var(--ink);letter-spacing:-.01em;
  font-size:1.35rem;margin:44px 0 14px}

/* The opening paragraph carries no heading — it answers "what is this" itself,
   so it is set one step larger than body copy and does the work of one. */
.ldetail .lbody p.lead{font-size:1.2rem;line-height:1.62;color:var(--ink);margin:0}

/* Present for assistive technology, absent from the page. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.lsource{
  margin:26px 0 0;padding:16px 20px;background:var(--cream);border-left:2px solid var(--hair);
  font-size:.9rem;line-height:1.6;color:var(--muted)}

/* Where the facts came from. Required by the source's licence, and the page
   should say it whether or not a licence asks. */
.ldetail .lbody p.lattrib{margin:8px 0 0;font-size:.78rem;line-height:1.55;
  color:var(--muted);opacity:.85}

/* definition rows — "Good to know" */
.lgrid{margin:0;border-top:1px solid var(--hair)}
.lgrid .r{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:0 24px;
  padding:13px 0;border-bottom:1px solid var(--hair)}
.lgrid .k{font-family:var(--caps);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding-top:.22em}
.lgrid .v{font-size:.98rem;color:var(--ink)}
.lgrid .v.pending{color:var(--muted)}
@media(max-width:560px){.lgrid .r{grid-template-columns:1fr;gap:4px}}

/* ---------- contact card ---------- */
.enqcard .crow{display:grid;grid-template-columns:minmax(0,5.5rem) minmax(0,1fr);gap:0 16px;
  padding:11px 0;border-bottom:1px solid var(--hair);font-size:.95rem}
.enqcard .crow:last-of-type{border-bottom:none}
.enqcard .ck{font-family:var(--caps);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding-top:.28em}
.enqcard .cv{color:var(--ink);overflow-wrap:anywhere}
.enqcard .cv a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(184,150,62,.5)}
.enqcard .cv a:hover{color:var(--terra);border-bottom-color:currentColor}
.enqcard .ctnote{margin:16px 0 0;font-size:.82rem;line-height:1.55;color:var(--muted)}

/* ---------- the claim card ---------- */
.claimcard{
  margin-top:26px;padding:30px 28px 28px;border-radius:8px;
  background:linear-gradient(158deg,#0B1F24 0%,#10262B 58%,#081A1E 100%);
  border:1px solid rgba(184,150,62,.42);
  box-shadow:0 20px 46px -26px rgba(11,31,36,.6);color:#F6F1E6}
.claimcard h3{font-family:var(--font-serif);font-weight:600;font-size:1.55rem;line-height:1.15;
  color:#F6F1E6;margin:0 0 12px}
.claimcard p{font-size:.95rem;line-height:1.62;color:rgba(246,241,230,.82);margin:0 0 18px}
.claimcard ul{list-style:none;margin:0 0 22px;padding:0}
.claimcard li{position:relative;padding:0 0 0 22px;margin:0 0 9px;font-size:.93rem;line-height:1.5;
  color:rgba(246,241,230,.9)}
.claimcard li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;
  background:var(--gold-soft,#CBAA54)}
.claimcard .cbtn{
  display:block;text-align:center;padding:13px 18px;border-radius:3px;
  background:var(--gold,#B8963E);color:#0B1F24;text-decoration:none;
  font-family:var(--caps);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  transition:background .2s ease,color .2s ease}
.claimcard .cbtn:hover{background:var(--gold-soft,#CBAA54)}
.claimcard .clink{margin:16px 0 0;font-size:.82rem;line-height:1.6;color:rgba(246,241,230,.62)}
.claimcard .clink a{display:block;margin-top:3px;color:var(--gold-soft,#CBAA54);text-decoration:none;
  overflow-wrap:anywhere}
.claimcard .clink a:hover{text-decoration:underline;text-underline-offset:3px}

@media(max-width:900px){
  .enqcard{position:static}
  .lmain{padding:40px 0 70px}
}