/* ================================================================
   S.T Contracts - Fit Out Page Google Review Pills
   ================================================================
   Standalone reusable component for fit-out landing pages.
   4 variants: opaque (hero), light (grey/white bg), dark, orange.
   Used across: fit-out, commercial, warehouse, industrial pages.

   Integration with st-contracts-fit-out-page.css (1295 lines):
   ---------------------------------------------------------------
   Visual family
   - Hero opaque: orange tint matches existing .hero-badge brand
     family (rgba(242,136,35,0.15) bg, rgba(242,136,35,0.3) border)
   - Star colour matches existing #fbbf24 yellow used throughout
   - Light variant uses #fff bg + #eee border to match list-box
   - Backdrop blur matches existing google-pill (8px)

   Layout / alignment
   - inline-flex pills centre naturally in text-align:center parents
     (mobile hero-content, mobile services-content)
   - 768px+ both parents switch to text-align:left, pill follows
   - Vertical-align middle for clean baseline behaviour

   Spacing rhythm
   - Hero pill mb 20px (matches original .hero-badge mb 20px)
   - Services pill mb 24px (matches list-box mb 24px above it)
   - Bumps to 22/28px at 1024+, 24px hero at 1401+ to track
     enlarged H1/H2 on big screens

   Sizing scale
   - Mobile: 8px 16px padding, 13px text, 18px icon, 12px stars
   - 768px+: 12px gap, 12px 22px padding, 15px text, 24px icon
   - 1024px+: 13px 24px padding, 16px text, 26px icon
   - 1401px+: 14px 26px padding, 17px text, 28px icon
   - Tracks H1: 30 -> 38 -> 46 -> 52, body: 15 -> 17 -> 18 -> 19
   ================================================================ */


/*====================
  BASE PILL
  Mobile-first. Block-level flex with fit-content width so the pill
  always sits on its own line above the CTA button. width:fit-content
  means it doesn't stretch full-width even though it's display:flex.
  margin: 0 auto centres on mobile (services-content is text-align:center).
  At 768px+ override removes the auto-centring so it aligns left.
====================*/
.st-contracts-fit-out-page-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    font-family: 'Mulish', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
    white-space: nowrap;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.st-contracts-fit-out-page-pill:hover {
    transform: translateY(-1px);
}

.st-contracts-fit-out-page-pill-icon {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    flex-shrink: 0;
    object-fit: contain;
}

.st-contracts-fit-out-page-pill-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
}

.st-contracts-fit-out-page-pill-stars i {
    color: #fbbf24;
    font-size: 12px;
}

.st-contracts-fit-out-page-pill-text {
    font-size: 13px;
    line-height: 1;
}


/*====================
  VARIANT 1 - OPAQUE (orange-tinted)
  Hero / dark backgrounds. Matches existing .hero-badge family.
  Spacing matches the original .hero-badge: margin-bottom 20px.
====================*/
.st-contracts-fit-out-page-pill-opaque {
    background: rgba(242, 136, 35, 0.15);
    border: 1px solid rgba(242, 136, 35, 0.3);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 20px;
}

.st-contracts-fit-out-page-pill-opaque:hover {
    background: rgba(242, 136, 35, 0.22);
    border-color: rgba(242, 136, 35, 0.45);
}

/* Backdrop-filter fallback - if unsupported, deepen the bg slightly */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .st-contracts-fit-out-page-pill-opaque {
        background: rgba(242, 136, 35, 0.25);
    }
}


/*====================
  VARIANT 2 - LIGHT
  White on grey services section (#f8f9fa background).
  Sits between list-box and CTA button.
  Margin matches existing list-box rhythm: 24px.
====================*/
.st-contracts-fit-out-page-pill-light {
    background-color: #fff;
    border: 1px solid #eee;
    color: #333;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
}

.st-contracts-fit-out-page-pill-light:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #ddd;
}


/*====================
  VARIANT 3 - DARK
  Reserved for light backgrounds where high contrast is wanted.
====================*/
.st-contracts-fit-out-page-pill-dark {
    background-color: #333;
    border: 1px solid #333;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.st-contracts-fit-out-page-pill-dark:hover {
    background-color: #2a2a2a;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}


/*====================
  VARIANT 4 - ORANGE (solid)
  Reserved for emphasis placements - solid brand orange #F28823.
====================*/
.st-contracts-fit-out-page-pill-orange {
    background-color: #F28823;
    border: 1px solid #F28823;
    color: #fff;
    box-shadow: 0 2px 8px rgba(242, 136, 35, 0.2);
}

.st-contracts-fit-out-page-pill-orange:hover {
    background-color: #d67315;
    border-color: #d67315;
    box-shadow: 0 4px 14px rgba(242, 136, 35, 0.3);
}

/* White stars for contrast on solid orange */
.st-contracts-fit-out-page-pill-orange .st-contracts-fit-out-page-pill-stars i {
    color: #fff;
}


/*====================
  RESPONSIVE - 768px+ (tablet)
  Hero/services switch to text-align:left at this breakpoint.
  Pill steps up confidently: gap 12, padding 12 22, icon 24.
  Existing google-pill is 10/20/22; we go slightly larger so the
  inline pills (hero, services) carry visual weight in their context.
====================*/
@media screen and (min-width: 768px) {

    .st-contracts-fit-out-page-pill {
        gap: 12px;
        padding: 12px 22px;
        font-size: 15px;
        margin-left: 0;
        margin-right: 0;
    }

    .st-contracts-fit-out-page-pill-text {
        font-size: 15px;
    }

    .st-contracts-fit-out-page-pill-icon {
        width: 24px;
        height: 24px;
    }

    .st-contracts-fit-out-page-pill-stars i {
        font-size: 14px;
    }
}


/*====================
  RESPONSIVE - 1024px+ (desktop)
  Hero H1 jumps to 46px, body to 18px. Services H2 to 36px.
  Existing .hero-badge span scales to 14px at this point.
  Pill steps up to track: padding 13/24, text 16, icon 26.
  Hero pill mb -> 22px, services pill mb -> 28px to breathe.
====================*/
@media screen and (min-width: 1024px) {

    .st-contracts-fit-out-page-pill {
        padding: 13px 24px;
        font-size: 16px;
    }

    .st-contracts-fit-out-page-pill-text {
        font-size: 16px;
    }

    .st-contracts-fit-out-page-pill-icon {
        width: 26px;
        height: 26px;
    }

    .st-contracts-fit-out-page-pill-stars i {
        font-size: 15px;
    }

    .st-contracts-fit-out-page-pill-opaque {
        margin-bottom: 22px;
    }

    .st-contracts-fit-out-page-pill-light {
        margin-bottom: 28px;
    }
}


/*====================
  RESPONSIVE - 1401px+ (large desktop)
  Hero H1 -> 52px, body -> 19px, btn-primary -> 17px/18 36 padding.
  Reviews google-pill icon scales to 26px at this breakpoint.
  Pill goes to 28px icon, 17px text - slightly ahead of the
  reviews-section pill since it now serves as primary trust signal
  in hero/services prominence.
====================*/
@media screen and (min-width: 1401px) {

    .st-contracts-fit-out-page-pill {
        gap: 14px;
        padding: 14px 26px;
        font-size: 17px;
    }

    .st-contracts-fit-out-page-pill-text {
        font-size: 17px;
    }

    .st-contracts-fit-out-page-pill-icon {
        width: 28px;
        height: 28px;
    }

    .st-contracts-fit-out-page-pill-stars i {
        font-size: 16px;
    }

    .st-contracts-fit-out-page-pill-opaque {
        margin-bottom: 24px;
    }
}


/*====================
  VERY SMALL SCREENS - 360px and below
  Allow text wrapping for narrow Android viewports / embedded webviews.
====================*/
@media screen and (max-width: 360px) {

    .st-contracts-fit-out-page-pill {
        font-size: 12px;
        padding: 7px 14px;
        gap: 6px;
        white-space: normal;
        text-align: center;
    }

    .st-contracts-fit-out-page-pill-text {
        font-size: 12px;
    }

    .st-contracts-fit-out-page-pill-icon {
        width: 16px;
        height: 16px;
    }

    .st-contracts-fit-out-page-pill-stars i {
        font-size: 11px;
    }
}