/**
 * Footer "Our Partners" Band
 * Styles the partner-badge strip that sits in the global footer, between the
 * three .footer-item columns and .copyrights.
 *
 * Markup contract (footer.php):
 *   .footer-partners                     <- bare .col-12 inside .row.footer_row
 *     .footer-partners-inner
 *       h6.footer-partners-title
 *       span.footer-partners-rule
 *       p.footer-partners-subtitle
 *       .footer-partners-grid
 *         a.footer-partner-tile.footer-partner-tile--kinsta
 *                                        -> <img> Kinsta Agency Partner Elite (801x239 PNG)
 *         a.footer-partner-tile.footer-partner-tile--google
 *                                        -> <img> Google Partner / Premier 2026 (152x145.5 SVG)
 *         span.footer-partner-tile.footer-partner-tile--microsoft.is-static
 *                                        -> <img> Microsoft Advertising lockup (644x214 SVG)
 *         span.footer-partner-tile.footer-partner-tile--ctm.is-static
 *                                        -> <img> CTM / CallTrackingMetrics (839x250 SVG)
 *
 * Every tile is a single <img>. There is no text in the markup and no
 * screen-reader span: each tile's accessible name comes from the img alt
 * (plus aria-label on the Kinsta link), so nothing here can be broken by the
 * theme's global `* { font-family: Poppins !important }` rule.
 *
 * Kinsta and Google are links (Google's badge guidelines REQUIRE the online
 * badge to link to the agency's Partner profile). Microsoft and CTM are
 * static spans - neither program publishes a public profile URL for us.
 *
 * Every selector is scoped under .footer so these rules beat the theme's
 * existing footer CSS (assets/css/style.css) without needing !important.
 *
 * @package Cosmick_Media_Project_Theme
 */

/* ========================================
   Variables
========================================== */
:root {
    --fp-coral: #ff675b;
    --fp-gold: #fdc785;
    --fp-ground: #3c3c3c;
    --fp-divider: #2d1839;
    --fp-tile-bg: #ffffff;
    --fp-tile-ink: #3c3c3c;
    --fp-muted: rgba(255, 255, 255, 0.65);
    --fp-rule-gradient: linear-gradient(90deg, #ff675b 0%, #fdc785 100%);
    --fp-transition: all 0.3s ease;
}

/* ========================================
   Band wrapper

   THE IMPORTANT RULE IN THIS FILE.
   .footer_row carries negative horizontal margins (0 -80px, stepping to
   -50 / -40 / -15px) and its sibling .footer-item columns cancel them with a
   matching `padding: 0 80px` ladder. .footer-partners deliberately does NOT
   carry .footer-item (that class paints `border-left: 1px solid #2d1839` on
   :not(:first-child)), so it must reproduce that exact padding ladder itself
   or the band bleeds 80px outside the container on both sides.
   Keep the horizontal values below in lockstep with
   `.footer .footer_row .footer-item` in assets/css/style.css.

   The vertical values give the band its own top separator, mirroring the
   rhythm of .copyrights (border-top + 40px above / 40px below) which stacks
   directly beneath it.
========================================== */
.footer .footer-partners {
    padding: 40px 80px 0;
    margin-top: 40px;
    border-top: 1px solid var(--fp-divider);
}

.footer .footer-partners-inner {
    text-align: center;
}

/* ========================================
   Heading, accent rule, subtitle
========================================== */

/* Matches the footer's other h6 headings (20px/700, coral) but centered.
   text-transform + opacity are declared explicitly: legacy style.css
   uppercases h1-h3 and fades h2, and this class may be re-tagged. */
.footer .footer-partners-title {
    color: var(--fp-coral);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: none;
    opacity: 1;
    text-align: center;
    margin: 0 0 14px;
    padding: 0;
}

/* Short centered accent rule - deliberately NOT the footer's full-width
   .line-head treatment. */
.footer .footer-partners-rule {
    display: block;
    width: 60px;
    height: 3px;
    margin: 0 auto 16px;
    border-radius: 3px;
    background: var(--fp-rule-gradient);
}

/* Legacy style.css sets `p { margin-bottom: 35px }`, so the margin is
   declared in full here. */
.footer .footer-partners-subtitle {
    color: var(--fp-muted);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.6;
    text-transform: none;
    max-width: 700px;
    margin: 0 auto 30px;
}

/* ========================================
   Tile grid

   A GRID, not a wrapping flex row: `align-items: stretch` plus the shared
   min-height below is what guarantees four tiles of identical height sitting
   on one top edge and one bottom edge.

   The second column is deliberately NARROWER than the other three. Google's
   badge is a ~1:1 white card; dropped into a 3-wide cell it reads as a small
   bordered card floating inside a second, bigger card. Sizing its column to
   the badge instead makes the tile a frame around the badge rather than a
   container holding it, and it lets the other three - all landscape artwork
   between 3.0:1 and 3.4:1 - keep the width they actually need.

   max-width caps the row so four tiles never stretch to cartoonish widths on
   an ultrawide footer. Bump the column count below if a fifth partner lands.
========================================== */
.footer .footer-partners-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 22px;
    max-width: 1060px;
    margin: 0 auto;
}

/* ========================================
   Partner tiles

   White ground is mandatory: the Kinsta badge is near-black art and the
   Google badge ships on white, so both need a light tile against the
   #3c3c3c footer.

   The tile is a fixed-height "logo well" (min-height) with the artwork
   optically centered in it.
========================================== */
.footer .footer-partner-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    min-height: 160px;
    padding: 20px 22px;
    background: var(--fp-tile-bg);
    border-radius: 18px;
    text-decoration: none;
    /* Dark ink so a missing image's alt text stays legible on the white tile
       (the footer otherwise inherits color:#fff !important). */
    color: var(--fp-tile-ink);
    /* Two-layer stack: a 2px coral ring held at zero alpha plus the resting
       drop shadow. Keeping both layers present at rest lets the hover state
       interpolate smoothly, and because it is a shadow rather than a border
       the tile never changes size. */
    box-shadow: 0 0 0 2px rgba(255, 103, 91, 0), 0 10px 30px rgba(0, 0, 0, 0.22);
    transition: var(--fp-transition);
}

/* Height-constrained logos: the per-brand height below is the real control,
   width follows from the artwork's own aspect ratio so nothing is distorted
   (Google's badge guidelines explicitly forbid changing its proportions). */
.footer .footer-partner-tile img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* ========================================
   Per-brand optical sizing

   THE OTHER RULE THAT MATTERS IN THIS FILE.
   Setting one height for four logos is the classic logo-row mistake. These
   four have wildly different aspect ratios AND wildly different amounts of
   built-in padding, so a single shared height makes them read as four
   different sizes:

     kinsta  801x239    3.35:1  a solid black CARD. Its own wordmark is only
                                ~25% of the artwork height, so the file has to
                                render BIG for the type inside to match the rest
                                - this is the one the client said read small.
     google  152x145.5  1.04:1  a near-square white card with its own hairline
                                border, clear space and footer bar baked in.
                                Gets the narrow column and nearly fills it.
                                NEVER goes below 100px rendered height and
                                never gets a width that would distort it -
                                both are Google badge-guideline requirements.
     ms      644x214    3.01:1  a bare lockup with no padding at all, so it
                                reads large for its height and sits smallest
                                of the three landscape marks.
     ctm     839x250    3.36:1  a bare wordmark with very large letterforms -
                                smaller again.

   Tuned by eye against rendered screenshots at 1440 / 1200 / 992 / 900 / 600
   / 390 / 360px, not by arithmetic. Every breakpoint below re-declares all
   four heights together: they are a set, and changing one on its own is
   exactly what breaks the balance.
========================================== */
.footer .footer-partner-tile--kinsta img {
    height: 66px;
}

/* Tight padding so the badge runs to ~92% of the tile height. Combined with
   the narrow column above, the tile becomes a frame around Google's card
   instead of a card containing a smaller card. */
.footer .footer-partner-tile--google {
    padding: 6px;
}

.footer .footer-partner-tile--google img {
    height: 148px;
}

.footer .footer-partner-tile--microsoft img {
    height: 51px;
}

.footer .footer-partner-tile--ctm img {
    height: 47px;
}

/* ========================================
   Interaction

   Only the two tiles with a destination are interactive.
========================================== */
.footer a.footer-partner-tile:hover,
.footer a.footer-partner-tile:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 0 0 2px var(--fp-coral), 0 18px 40px rgba(0, 0, 0, 0.35);
    color: var(--fp-tile-ink);
}

/* Keyboard-reachable link in the footer - gold reads clearly against both the
   white tile and the #3c3c3c ground, and the offset keeps it off the artwork. */
.footer a.footer-partner-tile:focus-visible {
    outline: 3px solid var(--fp-gold);
    outline-offset: 4px;
}

/* Microsoft and CTM are not links; they must not lift or suggest affordance. */
.footer .footer-partner-tile.is-static {
    cursor: default;
}

/* ========================================
   Responsive

   Two independent ladders live here:
   1. The band's horizontal padding, which must mirror .footer-item exactly
      (80 / 50 / 40 / 15) or the band bleeds outside the container.
   2. The column count, which steps 4 -> 2. Four items never go to three:
      a 3 + 1 row reads as a mistake, 2 + 2 reads as a grid. It never goes to
      1 either - two tiles still hold the Kinsta badge legibly at 360px, and
      a single column would leave Google's square badge stranded in a very
      wide tile.

   Below 992px the narrow Google column has to go: in a two-column grid the
   second column is shared with CTM, which needs the width. So from there
   down the Google badge is pulled back towards its 100px floor instead, which
   keeps it from dwarfing the three landscape marks in equal cells.
========================================== */
@media (max-width: 1499px) {
    .footer .footer-partners {
        padding: 40px 50px 0;
    }
}

@media (max-width: 1199px) {
    .footer .footer-partners {
        padding: 40px 40px 0;
    }

    /* The container steps 1140 -> 960 through this range, so the three wide
       cells lose ~45px. Tile height and the Google badge hold steady; only
       the three landscape logos come down. */
    .footer .footer-partners-grid {
        gap: 18px;
    }

    .footer .footer-partner-tile {
        padding: 16px;
    }

    .footer .footer-partner-tile--kinsta img {
        height: 58px;
    }

    .footer .footer-partner-tile--microsoft img {
        height: 46px;
    }

    .footer .footer-partner-tile--ctm img {
        height: 42px;
    }
}

@media (max-width: 991px) {
    .footer .footer-partners {
        padding: 35px 15px 0;
    }

    /* 2 x 2, equal columns. max-width keeps the pair compact instead of
       letting two tiles stretch half a tablet wide - the wider the cell, the
       more the square Google badge looks marooned in it. */
    .footer .footer-partners-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        max-width: 560px;
    }

    .footer .footer-partner-tile {
        min-height: 150px;
        padding: 16px 20px;
    }

    .footer .footer-partner-tile--kinsta img {
        height: 64px;
    }

    .footer .footer-partner-tile--google {
        padding: 12px;
    }

    .footer .footer-partner-tile--google img {
        height: 126px;
    }

    .footer .footer-partner-tile--microsoft img {
        height: 50px;
    }

    .footer .footer-partner-tile--ctm img {
        height: 45px;
    }
}

@media (max-width: 767px) {
    /* .footer_row gains row-gap:35px here and .copyrights drops its
       margin-top, so the band needs less of its own vertical space. */
    .footer .footer-partners {
        padding: 30px 15px 0;
        margin-top: 10px;
    }

    .footer .footer-partners-subtitle {
        margin-bottom: 24px;
    }
}

@media (max-width: 575px) {
    /* Phones. The pair of cells is now ~177px wide at 390px and ~162px at
       360px, so Kinsta is width-limited rather than height-limited and the
       Google badge sits just above its 100px minimum. */
    .footer .footer-partners-grid {
        gap: 12px;
        max-width: 420px;
    }

    .footer .footer-partner-tile {
        min-height: 128px;
        padding: 12px;
        border-radius: 14px;
    }

    .footer .footer-partner-tile--kinsta img {
        height: 44px;
    }

    .footer .footer-partner-tile--google {
        padding: 10px;
    }

    .footer .footer-partner-tile--google img {
        height: 108px;
    }

    .footer .footer-partner-tile--microsoft img {
        height: 35px;
    }

    .footer .footer-partner-tile--ctm img {
        height: 32px;
    }
}

/* ========================================
   Motion / Print
========================================== */
@media (prefers-reduced-motion: reduce) {
    .footer .footer-partner-tile {
        transition: none;
    }

    .footer a.footer-partner-tile:hover,
    .footer a.footer-partner-tile:focus-visible {
        transform: none;
    }
}

@media print {
    .footer .footer-partners {
        border-top: 1px solid #cccccc;
    }

    .footer .footer-partners-title {
        color: #000000;
    }

    .footer .footer-partners-subtitle {
        color: #333333;
    }

    .footer .footer-partner-tile {
        box-shadow: none;
        border: 1px solid #cccccc;
    }
}