/* Additions for the Laravel version. The template's style.css is kept unchanged
   except for ".city-list a" (cities are real links to their subdomains). */

/* Hero: image / local video instead of the placeholder */
.hero-media { padding: 0; background: #e4e0d9; }
.hero-media:before { display: none; }
.hero-media img,
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Logo image in the brand block */
.brand-icon img { display: block; width: 30px; height: 30px; object-fit: contain; }

/* Rich text inside blocks that were single paragraphs in the template */
.expert-intro p { margin: 0; }
.faq-answer > :last-child { margin-bottom: 0; }
.legal-copy p { margin: 0 0 1em; }
.expert-details { color: var(--muted); font-size: 13px; line-height: 20px; }

/* Practice badge colours (limited set chosen in the admin panel) */
.practice-result.badge-blue { color: #2f5f8a; background: #eaf2f9; border-color: #c9dbeb; }
.practice-result.badge-amber { color: #8a5a00; background: #fdf5e3; border-color: #f0dcae; }
.practice-result.badge-gray { color: #555; background: #f2f0ec; border-color: #d9d6d1; }
.practice-result.badge-burgundy { color: var(--burgundy); background: #f3e8eb; border-color: #e3c9d0; }

/* Ratings below 5 */
.review-stars .star-empty { color: #d9d6d1; }
.review-stars svg:not(.star-empty) { fill: currentColor; }

/* Contacts: caption for the real office on city versions without a local office */
.contact-caption { font-size: 13px; line-height: 20px; color: var(--muted); margin: 10px 0 0; }

/* City switcher: link back to the common version */
.city-root-link { margin: 24px 0 0; font-size: 14px; }
.city-root-link a { color: var(--burgundy); }
.city-list a { text-decoration: none; }

/* Staff preview banner */
.preview-bar { background: #1c1c1c; color: #fff; font-size: 13px; padding: 8px 16px; text-align: center; }

/* Optional SmartCaptcha container */
.smart-captcha-box { margin: 10px 0 16px; min-height: 0; }

/* Template fix: on phones the long word in H1 ("Негосударственная") stretched the
   1fr hero column 20px past the screen and caused horizontal scrolling. */
@media (max-width: 767px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy h1 { overflow-wrap: break-word; }
}
/* «Негосударственная» at 38px is ~370px wide: scale H1 down on narrow phones so the
   word fits whole instead of overflowing (template) or breaking mid-word. */
@media (max-width: 460px) {
  h1 { font-size: min(38px, 8.5vw); line-height: 1.21; }
}
@media (max-width: 767px) {
  /* Grid items default to min-width:auto; on narrow phones (320px) long words
     widened the single column. Let columns shrink to the screen. */
  .container[class*="-grid"] > *, [class*="-grid"] > * { min-width: 0; }
  h2, h3 { overflow-wrap: break-word; }
}