/* File: display-business-listing.css
   Description: Business listing styling for Basic + Premium + Smart Site (microsite).
   NOTE: Checklist + side-card visuals live in checklist.css.
   This file handles layout, header, grid, featured image, contact layout, and microsite.
*/

/* =========================
   BASIC V2 layout (no map)
   ========================= */

.ll-basic-header{ margin-bottom:1.25rem; }

.ll-basic-header__row{
  display:flex;
  align-items:stretch;
  gap:1rem;
}

.ll-basic-header__logo{ flex:0 0 auto; }

.ll-basic-logo-img{
  height:72px;          /* primary control */
  width:auto;           /* let width grow naturally */
  max-width:140px;      /* safety cap for super-wide logos */
  object-fit:contain;

  border-radius:10px;
  background:#fff;
  border:1px solid #e2e8f0;
  padding:8px;
}

.ll-basic-header__titles{ min-width:0; }

.ll-basic-title{
  margin:0;
  line-height:1.15;
}

.ll-basic-primary-category{
  margin-top:.35rem;
  font-size:18px;
  color:#64748b;
  font-weight:600;
}

/* ---- MAIN GRID: equal left/right columns ---- */
.ll-basic-body.ll-section-grid{
  grid-template-columns:1fr 1fr;
  align-items:start;
  gap:1.5rem;
}

/* Remove artificial width constraints */
.ll-basic-body__side,
.ll-basic-body__main{
  min-width:0;
}

/* Featured image card (right side) */
.ll-basic-featured{
  border-radius:12px;
  overflow:hidden;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  width:100%;
  max-width:none;
}

.ll-basic-featured__img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

/* Side card structure only (visual surface lives in checklist.css) */
.ll-basic-side-card{
  border-radius:12px;
}

/* Title spacing only (typography lives in checklist.css) */
.ll-basic-card-title{
  margin:0 0 .75rem;
}

/* =========================
   CONTACT CARD LAYOUT
   ========================= */

.ll-basic-contact-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.7rem;
}

.ll-basic-contact-item{
  display:flex;
  gap:.65rem;
  align-items:flex-start; /* keep multi-line address looking right */
}

/* Icon */
.ll-basic-icon{
  width:18px;
  height:18px;
  color:#0ea5e9;
  flex:0 0 18px;

  /* baseline alignment fix */
  margin-top:0;                 /* replaces old margin-top:2px */
  transform:translateY(.18em);  /* tweak .14em–.22em if needed */
}

/* Text/link wrapping so it never becomes vertical */
.ll-basic-contact-text,
.ll-basic-contact-link{
  overflow-wrap:anywhere;
  word-break:break-word;
  min-width:0;

  /* make icon alignment consistent */
  line-height:1.35;
  display:block;
}

.ll-basic-contact-link{
  color:#0f172a;
  text-decoration:none;
  font-weight:600;
}

.ll-basic-contact-link:hover{ text-decoration:underline; }

/* Responsive */
@media (max-width:900px){
  .ll-basic-body.ll-section-grid{ grid-template-columns:1fr; }
  .ll-basic-body__side{ min-width:0; }
}

@media (max-width:768px){
  .ll-basic-header__row{ align-items:center; }
  .ll-basic-logo-img{ width:60px; height:60px; max-height:60px; }
  .ll-basic-featured__img{ height:auto; }
}

/* =========================
   BASIC + PREMIUM SURFACE VARIANTS
   ========================= */

.ll-post-surface.ll-basic{ border-top:4px solid #e2e8f0; }
.ll-post-surface.ll-premium{ border-top:4px solid #0f766e; }

/* Badges (business listing) */
.ll-badge{
  display:inline-block;
  padding:.15rem .5rem;
  margin-left:.5rem;
  font-size:.75rem;
  line-height:1;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.ll-badge-premium{ background:#0f766e; color:#fff; }

/* Optional: legacy selector variant you had */
.ll-badge.ll-badge-premium{
  margin-left:.4rem;
  padding:.15rem .45rem;
  font-size:.75rem;
  line-height:1;
  border-radius:999px;
  background:#fde68a;
  color:#7c2d12;
  border:1px solid #f59e0b;
}

/* =========================
   BUSINESS HEADER + LOGO (legacy support)
   ========================= */

.ll-left-column h1{
  font-size:3.4rem;
  font-weight:800;
  margin:0 0 .75rem;
  line-height:1.12;
}

.business-logo{
  max-width:200px;
  max-height:120px;
  object-fit:contain;
  display:block;
  margin-left:auto;
}

/* Rating badge wrapper */
.ll-rating-badge,
.ll-microsite-rating-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}

/* =========================
   BUSINESS DESCRIPTION
   ========================= */

.post-description{
  font-size:1.7rem;
  font-weight:400;
  line-height:1.75;
  color:#000;
}

.post-description p{ margin-bottom:1.5rem; }

/* =========================
   BASIC: quick info sizing
   ========================= */

.ll-basic-info-block{ font-size:1.4rem; }

/* =========================
   BASIC: map layout tweaks (used on layouts that include a map)
   ========================= */

.ll-basic-map-wide{
  align-items:start;
  margin-bottom:1.25rem;
}

.ll-basic-map-wide .info-section,
.ll-basic-map-wide .address-map-container{
  margin:0;
}

@media (min-width:1100px){
  .ll-basic-map-wide{
    width:80vw;
    max-width:1600px;
    margin-left:calc(50% - 40vw);
    margin-right:calc(50% - 40vw);
    grid-template-columns:minmax(300px,1fr) minmax(0,3fr);
    align-items:start;
  }
}

@media (min-width:769px) and (max-width:1099px){
  .ll-basic-map-wide{
    grid-template-columns:minmax(280px,1.1fr) minmax(0,1.9fr);
    align-items:start;
  }
}

@media (max-width:768px){
  .ll-basic-map-wide{
    gap:.75rem;
    margin-bottom:.75rem;
  }
  .ll-basic-map-wide .address-map-container{ padding-top:.85rem; }
  .ll-basic-map-wide .map-address{ margin-bottom:.5rem; }
  .business-logo{ margin:1rem 0 0; }
}

/* =========================
   SMART SITE (Microsite)
   Scope EVERYTHING to .ll-microsite so it doesn't affect Basic/Premium.
   ========================= */

.ll-microsite-section{ padding:2.25rem 0; }

.ll-microsite-grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:2rem;
  align-items:start;
}

@media (max-width:900px){
  .ll-microsite-grid{ grid-template-columns:1fr; }
}

/* Hero */
.ll-microsite-hero{ color:#fff; }
.ll-microsite-hero-inner{ max-width:1200px; margin:0 auto; padding:3rem 1.25rem; }
.ll-microsite-title{ font-size:3rem; line-height:1.1; margin:.5rem 0 .75rem; }
.ll-microsite-headline{ font-size:1.25rem; opacity:.95; margin:0 0 1rem; }

.ll-microsite-primary-category-pill{
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  font-size:.9rem;
}

/* Header strip + CTAs */
.ll-microsite-header-strip{
  position:sticky;
  top:0;
  z-index:40;
  background:#fff;
  border-bottom:1px solid #e2e8f0;
}

.ll-microsite-header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:.9rem 1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.ll-microsite-header-brand{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  min-width:0;
}

.ll-microsite-header-logo img{
  width:42px;
  height:42px;
  object-fit:contain;
  border-radius:8px;
}

.ll-microsite-header-name{
  font-weight:800;
  color:#0f172a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:520px;
}

.ll-microsite-header-ctas{
  display:inline-flex;
  gap:.6rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.ll-microsite-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.6rem .95rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  border:1px solid #e2e8f0;
  background:#0f172a;
  color:#fff;
}
.ll-microsite-cta:hover{ opacity:.92; }

/* Main menu */
.ll-microsite-main-menu{
  background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
}

.ll-microsite-main-menu-list{
  max-width:1200px;
  margin:0 auto;
  padding:.75rem 1.25rem;
  list-style:none;
  display:flex;
  gap:1rem;
  align-items:center;
}

.ll-microsite-main-menu-list a{
  text-decoration:none;
  font-weight:700;
  color:#0f172a;
}

/* Sticky CTA bar */
.ll-microsite-sticky-cta-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  padding:.75rem 1rem;
  background:rgba(255,255,255,.92);
  border-top:1px solid #e2e8f0;
  backdrop-filter:blur(10px);
}

.ll-microsite-sticky-cta-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  gap:.75rem;
  justify-content:center;
}

/* Smartsite section headers */
.ll-microsite-section-header{
  max-width:1200px;
  margin:0 auto 1rem;
  padding:0 1.25rem;
}
.ll-microsite-section-header h2{ margin:0; }

/* Ensure bottom content isn't hidden behind sticky bar */
.ll-microsite-section:last-of-type{ padding-bottom:5rem; }

@media (max-width:768px){
  .ll-microsite-header-inner{ flex-direction:column; align-items:stretch; }
  .ll-microsite-header-ctas{ justify-content:flex-start; }
  .ll-microsite-main-menu-list{ flex-wrap:wrap; }
}