/* --- LoveRentals Round 2 Marketing Specific Styles --- */

/* Button styling for CTA links */
.lr-proof-link,
.lr-copy-link,
.hero-ctas .btn,
.lr-story-links a,
.lr-services-feature .btn,
.cta-row .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color var(--lr-dur-control) var(--lr-ease-control),
    border-color var(--lr-dur-control) var(--lr-ease-control),
    color var(--lr-dur-control) var(--lr-ease-control),
    box-shadow var(--lr-dur-control) var(--lr-ease-control),
    transform var(--lr-dur-control) var(--lr-ease-control);
}

.lr-proof-link,
.lr-copy-link,
.lr-story-links a {
  background-color: var(--action);
  color: #ffffff;
  border: 1px solid var(--action);
}

.lr-proof-link:hover,
.lr-copy-link:hover,
.lr-story-links a:hover {
  background-color: var(--action);
  border-color: var(--action);
  color: #ffffff;
  transform: translateY(-1px);
}

.lr-proof-link:focus-visible, .lr-copy-link:focus-visible,
.lr-story-links a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--action); }
.lr-proof-link:active, .lr-copy-link:active, .lr-story-links a:active {
  background-color: var(--action);
  transform: translateY(0);
}
.lr-proof-link[aria-disabled="true"], .lr-copy-link[aria-disabled="true"], .lr-story-links a[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; pointer-events: none; transform: none;
}

/* Homeowners row cards */
.lr-examples-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.1rem;
}
.lr-example-card {
  --example-accent: var(--action);
  --example-tint: #f3f9ff;
  background: linear-gradient(110deg, var(--example-tint), #fff 75%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 3px solid var(--example-accent);
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}
.lr-example-card:nth-child(even) {
  --example-accent: var(--rose);
  --example-tint: var(--rose-tint);
}
.lr-example-card h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  line-height: 1.35;
}
.lr-example-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Services section calendar styles */
.lr-cal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
  padding: 1.5rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.lr-cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
}
.lr-cal-head span {
  font-size: 0.875rem;
  color: var(--text-muted, #6b7280);
  font-weight: 400;
}
.lr-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.lr-cal-dow {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #9ca3af;
  margin-bottom: 0.5rem;
}
.lr-cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f3f4f6;
  font-size: 0.875rem;
  position: relative;
  border: 2px solid transparent;
}
.lr-cal-day b {
  font-weight: 500;
}
.lr-cal-rate {
  font-size: 0.6rem;
  font-weight: 600;
  margin-top: 0.125rem;
  display: flex;
  align-items: center;
  gap: 2px;
}
.lr-cal-day.is-weekend {
  background: #eff6ff;
  color: #1e3a8a;
  border-color: #bfdbfe;
}
.lr-cal-day.is-weekend .lr-cal-rate svg { color: #10b981; } /* Green up arrow */
.lr-cal-day.is-quiet {
  background: #fdf2f8;
  color: #831843;
  border-color: #fbcfe8;
}
.lr-cal-day.is-quiet .lr-cal-rate svg { color: #f43f5e; } /* Red down arrow */
.lr-cal-day.is-gap {
  background: #fffbeb;
  color: #78350f;
  border-color: #fde68a;
}
.lr-cal-day.is-blank {
  background: transparent;
}
.lr-cal-legend {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: #4b5563;
  justify-content: center;
}
.lr-cal-legend span {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.lr-cal-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.lr-cal-legend i.is-weekend { background: #bfdbfe; }
.lr-cal-legend i.is-quiet { background: #fbcfe8; }
.lr-cal-legend i.is-gap { background: #fde68a; }

/* Channels visual styles */
.lr-channel-logo {
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border: 1px solid #f3f4f6;
  color: #374151;
}

/* About Collage */
.lr-team-carousel { overflow: hidden; padding-block: clamp(2.5rem, 5vw, 4rem); }
.lr-team-intro { margin-bottom: 2rem; }
.lr-team-intro h2 { max-width: 24ch; }
.lr-team-intro > p:not(.eyebrow) { max-width: 65ch; color: var(--slate); }
.lr-collage-viewport {
  --collage-gap: 12px;
  --collage-narrow: 160px;
  --collage-wide: 256px;
  width: 100%; height: 280px; overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.lr-collage-strip { display: flex; width: max-content; height: 100%; animation: marquee 65s linear infinite; }
/* The trailing gutter belongs to each group so -50% is exactly one group. */
.lr-collage-group { display: flex; flex: 0 0 auto; min-width: 100vw; height: 100%; gap: var(--collage-gap); padding-right: var(--collage-gap); }
.lr-collage-column { display: flex; flex-direction: column; flex: 1 0 var(--collage-narrow); width: var(--collage-narrow); height: 100%; gap: var(--collage-gap); }
.lr-collage-wide, .lr-collage-wide-stack { flex-basis: var(--collage-wide); width: var(--collage-wide); }
.lr-collage-tile { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 12px; }
@media (min-width: 768px) {
  .lr-collage-viewport { --collage-gap: 16px; --collage-narrow: 208px; --collage-wide: 320px; height: 380px; }
}
.lr-collage-tile picture { display: block; width: 100%; height: 100%; }
.lr-collage-tile img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.lr-collage-viewport:not([data-eased]):hover .lr-collage-strip,
.lr-collage-viewport:not([data-eased]):focus-within .lr-collage-strip { animation-play-state: paused; }
.lr-collage-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 2rem 1rem 1rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.8)); color: white;
  transition: transform var(--lr-dur-control) var(--lr-ease-control),
    opacity var(--lr-dur-control) var(--lr-ease-control);
  transform: translateY(10px);
  opacity: 0;
}
.lr-collage-caption strong { display: block; font-size: 0.875rem; }
.lr-collage-caption span { font-size: 0.75rem; opacity: 0.8; }
.lr-collage-tile:hover .lr-collage-caption,
.lr-collage-viewport:focus-within .lr-collage-caption {
  transform: translateY(0);
  opacity: 1;
}

@media (hover: none) {
  .lr-collage-caption {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lr-collage-caption {
    transition: none;
  }
  .lr-collage-strip {
    animation: none;
  }
  .lr-collage-viewport { overflow-x: auto; }
  .lr-team-pause { display: none; }
}
body[data-lr-motion-preview="static"] .lr-collage-strip { animation: none; transform: none; }
body[data-lr-motion-preview="static"] .lr-collage-caption { transition: none; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Modal styles for consultation (general structural adjustments if needed) */
.lr-modal-close-btn {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  transition: background-color var(--lr-dur-control) var(--lr-ease-control);
}
.lr-modal-close-btn:hover {
  background: rgba(255,255,255,0.2);
}

/* How it starts dark overlay specific styles */
.lr-dark-overlay-wrapper .lr-section-head h2,
.lr-dark-overlay-wrapper .lr-section-head p { color: #fff; }
.lr-dark-overlay-wrapper .lr-steps-r2 li::before { color: #f4b942; }
.lr-dark-overlay-wrapper .lr-steps-r2 li::after { background: #f4b942; }
.lr-dark-overlay-wrapper .lr-steps-r2 p { color: #fff; }
.lr-dark-overlay-wrapper .lr-steps-r2 h3 { color: #ffffff; }

/* ---------------------------------------------------------------------------
   Credentials (Home + About). One aligned logo row: every mark sits in an
   equal-height slot and is contained (never cropped, stretched or recoloured).
   --------------------------------------------------------------------------- */
.lr-credentials { scroll-margin-top: 6rem; }
.lr-cred-head { max-width: 40rem; margin-bottom: 2rem; }
.lr-cred-head h2 { margin: 0 0 .5rem; }
.lr-cred-head p:not(.eyebrow) { color: var(--text-muted, var(--muted)); margin: 0; }
.lr-cred-groups { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.lr-cred-group { display: flex; flex-direction: column; min-width: 0; }
.lr-cred-group-head { border-top: 2px solid var(--rose); padding-top: .7rem; margin-bottom: 1.1rem; }
.lr-cred-group-head h3 { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; margin: 0; color: var(--rose-deep, var(--action)); line-height: 1.35; }
.lr-cred-group-head p { font-size: .86rem; line-height: 1.4; color: var(--text-muted, var(--muted)); margin: .2rem 0 0; }
.lr-cred-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.lr-cred-badge { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.lr-cred-mark { display: flex; align-items: center; justify-content: center; width: 100%; height: 4.5rem; padding: .6rem .75rem; background: #fffdfd; border: 1px solid var(--border); border-radius: 14px; box-sizing: border-box; }
.lr-cred-mark picture { display: contents; }
.lr-cred-mark-img { display: block; height: 3.25rem; max-height: 100%; max-width: 100%; width: auto; object-fit: contain; border-radius: 0; }
.lr-cred-caption { display: block; margin-top: .55rem; font-size: .82rem; font-weight: 600; line-height: 1.3; color: var(--ink, inherit); }
.lr-cred-summary { display: block; margin-top: .3rem; font-size: .82rem; line-height: 1.45; color: var(--text-muted, var(--muted)); }
.lr-cred-more { margin-top: .35rem; font-size: .8rem; text-align: left; }
.lr-cred-more summary { cursor: pointer; color: var(--rose-deep, var(--action)); font-weight: 600; text-align: center; list-style-position: inside; }
.lr-cred-more p { margin: .4rem 0 0; line-height: 1.5; color: var(--text-muted, var(--muted)); }
.lr-cred-foot { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; justify-content: space-between; }
.lr-cred-note { flex: 1 1 24rem; margin: 0; font-size: .8rem; line-height: 1.5; color: var(--text-muted, var(--muted)); }
@media (min-width: 900px) {
  .lr-cred-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.5rem; }
}
/* Subgrid: every group's heading row and logo row share one track, so long
   edited labels push all three logo rows down together instead of clipping. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .lr-cred-groups { grid-template-rows: auto auto; }
    .lr-cred-group { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  }
}
@media (min-width: 1100px) { .lr-cred-mark { height: 5rem; } .lr-cred-mark-img { height: 3.6rem; } }