/*!
 * BOATPRO — service detail pages
 * Part of the BOATPRO WordPress theme.
 * Author: Martin Žunec
 */

/* SERVICE DETAIL PAGES */
    .service-detail-hero{
      position:relative;
      min-height:600px;
      display:flex;
      align-items:center;
      color:#fff;
      background:
        linear-gradient(90deg,rgba(28,28,28,.84),rgba(42,43,43,.66) 52%,rgba(160,62,53,.28)),
        var(--detail-image) center/cover no-repeat;
    }
    .service-detail-hero .wrap{
      width:100%;
      max-width:1240px;
      margin:0 auto;
      padding-left:clamp(28px,6vw,92px);
      padding-right:clamp(28px,4vw,64px);
    }
    .service-back{
      display:inline-flex;
      margin-bottom:44px;
      color:rgba(255,255,255,.82);
      text-decoration:none;
      font-size:.82rem;
      font-weight:800;
    }
    .service-back:hover{color:#fff}
    .service-detail-hero-grid{
      display:block;
      max-width:900px;
    }
    .service-detail-hero .eyebrow{color:#e0aaa5}
    .service-detail-hero h1{
      max-width:900px;
      margin:.5rem 0 1rem;
      font-size:clamp(3.1rem,6vw,5.8rem);
      line-height:.95;
      letter-spacing:-.055em;
    }
    .service-lead{
      max-width:760px;
      margin:0;
      color:rgba(255,255,255,.86);
      font-size:1.08rem;
      line-height:1.65;
    }
    .service-overview,.service-scope,.service-when,.service-method{
      padding:92px 0;
    }
    .service-overview{background:#fff}
    .service-scope{background:#f5f5f3}
    .service-when{background:#fff}
    .service-method{background:#2a2b2b;color:#fff}
    .service-overview-grid,.service-when-grid{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(340px,.88fr);
      gap:58px;
      align-items:center;
    }
    .service-copy h2,.service-scope h2,.service-when h2,.service-method h2{
      margin:.45rem 0 1rem;
      color:var(--navy);
      font-size:clamp(2.3rem,4vw,4.2rem);
      line-height:1;
      letter-spacing:-.045em;
    }
    .service-copy p{
      color:#64727c;
      line-height:1.7;
      font-size:1rem;
    }
    .service-photo{
      margin:0;
      border-radius:22px;
      overflow:hidden;
      background:#ddd;
      box-shadow:0 18px 42px rgba(25,30,33,.1);
    }
    .service-photo img{
      width:100%;
      height:430px;
      display:block;
      object-fit:cover;
    }
    .service-photo figcaption{
      padding:11px 14px;
      background:#fff;
      color:#78858e;
      font-size:.7rem;
      line-height:1.35;
    }
    .scope-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
      margin-top:32px;
    }
    .scope-item{
      min-height:120px;
      padding:24px;
      border-radius:16px;
      background:#fff;
      border:1px solid #e4e5e2;
      display:flex;
      align-items:flex-end;
      color:var(--navy);
      font-weight:820;
      line-height:1.3;
    }
    .scope-item:before{
      content:"✓";
      align-self:flex-start;
      margin-right:12px;
      color:#A03E35;
      font-weight:950;
    }
    .when-list{
      display:grid;
      gap:12px;
      margin-top:24px;
    }
    .when-item{
      padding:16px 18px;
      border-radius:13px;
      background:#f5f5f3;
      color:#34434d;
      font-weight:720;
    }
    .when-item:before{
      content:"•";
      color:#A03E35;
      margin-right:10px;
      font-size:1.25rem;
    }
    .service-method h2{color:#fff}
    .service-method .eyebrow{color:#d9a39e}
    .method-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
      margin-top:34px;
    }
    .method-card{
      padding:26px;
      border:1px solid rgba(255,255,255,.13);
      border-radius:17px;
      background:rgba(255,255,255,.05);
    }
    .method-card strong{
      display:block;
      margin-bottom:10px;
      color:#fff;
      font-size:1.05rem;
    }
    .method-card p{
      margin:0;
      color:rgba(255,255,255,.7);
      line-height:1.58;
      font-size:.9rem;
    }
    .service-detail-cta{
      padding:92px 0;
      background:#f5f5f3;
    }
    .service-detail-cta-card{
      padding:50px;
      border-radius:24px;
      background:#fff;
      border:1px solid #e3e5e2;
      text-align:center;
    }
    .service-detail-cta-card h2{
      margin:0 0 12px;
      color:var(--navy);
      font-size:clamp(2.2rem,4vw,3.5rem);
      letter-spacing:-.045em;
    }
    .service-detail-cta-card p{
      max-width:670px;
      margin:0 auto;
      color:#66747e;
      line-height:1.65;
    }
    .service-detail-cta-actions{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:12px;
      margin-top:25px;
    }
    .service-detail-cta .btn-outline{
      color:var(--navy);
      border-color:#ccd1d4;
    }
    @media(max-width:820px){
      .service-detail-hero{min-height:540px}
      .service-detail-hero-grid{grid-template-columns:1fr}
      .service-overview-grid,.service-when-grid{grid-template-columns:1fr}
      .scope-grid,.method-grid{grid-template-columns:1fr}
      .service-photo img{height:320px}
      .service-detail-cta-card{padding:36px 22px}
    }