/* ==========================================================================
   Practice pages [fk_practice_page] — layout only; visuals come from ui.css tokens.
   ========================================================================== */

/* Host Elementor section: component owns the width and spacing */
.fk-pp-host { padding: 0 !important; }
.fk-pp-host > .elementor-container { max-width: none !important; }
.fk-pp-host .elementor-column > .elementor-element-populated,
.fk-pp-host .elementor-widget-wrap { padding: 0 !important; }

.fk-pp { background: var(--fk-surface); }

/* Hero */
.fk-pp-hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem);
  background: radial-gradient(60% 60% at 90% 10%, rgba(52,111,220,.10), transparent 70%), linear-gradient(180deg, var(--fk-surface-muted) 0%, #fff 100%); }
.fk-pp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.fk-pp-crumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; font-size: .84rem; color: var(--fk-fog); }
.fk-pp-crumbs a { color: var(--fk-fog) !important; text-decoration: none !important; }
.fk-pp-crumbs a:hover { color: var(--fk-blue) !important; }
.fk-pp-crumbs span[aria-current] { color: var(--fk-navy); font-weight: 600; }
.fk-pp-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.6rem 0 0; }
.fk-pp-hero-media { position: relative; margin: 0; }
.fk-pp-hero-img { display: block; aspect-ratio: 4 / 3.4; border-radius: var(--fk-r-xl); background-size: cover; background-position: center;
  background-color: var(--fk-surface-tint); box-shadow: var(--fk-ring), var(--fk-shadow-lg); }
.fk-pp-hero-badge { position: absolute; left: clamp(-1.2rem, -2vw, -.5rem); bottom: 1.6rem; display: flex; align-items: center; gap: .85rem; max-width: 22rem;
  padding: .9rem 1.1rem; border-radius: var(--fk-r-lg); background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--fk-ring), var(--fk-shadow-md); }
.fk-pp-hero-badge b { display: block; font: 700 .98rem/1.25 var(--fk-font-display); color: var(--fk-navy); }
.fk-pp-hero-badge small { display: block; margin-top: .15rem; font-size: .8rem; line-height: 1.4; color: var(--fk-fog); }
.fk-pp-hero-media figcaption { margin-top: .8rem; font-size: .8rem; color: var(--fk-fog); }
@media (max-width: 960px) {
  .fk-pp-hero-grid { grid-template-columns: 1fr; }
  .fk-pp-hero-badge { left: 1rem; right: 1rem; max-width: none; }
}

/* Overview */
.fk-pp-who { margin-top: 2rem; padding: 1.6rem; border-radius: var(--fk-r-lg); background: var(--fk-surface-muted); box-shadow: inset 0 0 0 1px var(--fk-border-soft); }

/* Matters */
.fk-pp-matters { margin-top: 2.6rem; }
.fk-pp-matters .fk-ui-card { display: flex; flex-direction: column; gap: .9rem; }
.fk-pp-matters .fk-ui-card p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--fk-fog); }

/* When to call + framework */
.fk-pp-law { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.fk-pp-when .fk-ui-checks { margin-top: 1.8rem; }
.fk-pp-framework { display: grid; gap: 1.25rem; }
.fk-pp-framework .fk-ui-card { padding: 1.8rem; }
.fk-pp-framework .fk-ui-h3 { margin-bottom: .9rem; }
.fk-pp-framework .fk-ui-prose p { font-size: .98rem; }
@media (max-width: 900px) { .fk-pp-law { grid-template-columns: 1fr; } }

/* Process */
.fk-pp-process { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* Guides + insights */
.fk-pp-guides { margin-top: 2.4rem; }
.fk-pp-guides .fk-ui-card { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.fk-pp-guides .fk-ui-card p { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--fk-fog); }
.fk-pp-more { margin-top: auto; padding-top: .6rem; font-weight: 700; font-size: .9rem; color: var(--fk-blue); }
.fk-pp-insights { margin-top: clamp(3rem, 6vw, 4.5rem); }
.fk-pp-insights .fk-bgrid { margin-top: 2.4rem; }

.fk-pp-disclaimer { margin: 1.4rem 0 0; font-size: .84rem; line-height: 1.6; color: var(--fk-fog); max-width: 60rem; }
