/* Free Pinterest Tools - the Pinterest skin on top of the shared
 * platform-tools.css shell: very round corners, a centered profile, black
 * tab underline, and a masonry board of "pins" whose tiles carry big
 * text the way graphic pins do. */

:root {
    --pin-red:      #e60023;
    --pin-red-dark: #ad081b;
    --pin-ink:      #111111;
    --pin-muted:    #767676;
    --pin-border:   #e9e9e9;
    --pin-chip:     #efefef;
    --pin-chip-hov: #e2e2e2;

    /* The H1 keeps the site's hero red (the Pinterest red clashed with the
       brand-red header bar; operator request 2026-08-29). */
    --pp-h1:    #962F2E;
    --pp-muted: var(--pin-muted);
    --pp-link:  var(--pin-red-dark);
}

/* -------------------------------------------------------------------
 * Pin board: CSS multi-column masonry.
 * ------------------------------------------------------------------- */
/* Three columns (ten pins, so 4 / 3 / 3; the registry order mixes tall,
 * medium, and square pins and the browser balances the column heights). */
.fpt-feed {
    column-count: 3;
    column-gap: 20px;
}
.fpt-pin {
    display: inline-block;
    width: 100%;
    margin: 0 0 24px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    scroll-margin-top: 24px;
}

/* The pin tile: rounded image-like block whose height comes from the
 * per-tool aspect ratio, holding a flat SVG illustration and an
 * always-visible red "Open" pill (Pinterest's Save button slot). */
.fpt-pin-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--fpt-ratio, 3 / 4);
    min-height: 200px;
    padding: 18px;
    border-radius: 16px;
    background: var(--fpt-tint, var(--pin-chip));
    color: var(--pin-ink);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fpt-pin-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.2s ease;
    pointer-events: none;
}
.fpt-pin-tile:hover,
.fpt-pin-tile:focus-visible {
    color: var(--pin-ink);
    box-shadow: var(--shadow-lg);
}
.fpt-pin-tile:hover::after {
    background: rgba(0, 0, 0, 0.06);
}
.fpt-pin-tile:focus-visible {
    outline: 2px solid #0074e8;
    outline-offset: 2px;
}
.fpt-pin-art {
    display: block;
    width: 74%;
    max-width: 250px;
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(17, 17, 17, 0.12));
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.fpt-pin-tile:hover .fpt-pin-art {
    transform: scale(1.03);
}
.fpt-pin-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--pin-red);
    font-size: 38px;
    box-shadow: var(--shadow-md);
}
.fpt-pin-open {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--pin-red);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s ease;
}
.fpt-pin-tile:hover .fpt-pin-open {
    background: var(--pin-red-dark);
}

.fpt-pin-body {
    padding: 12px 6px 0;
}
.fpt-pin-label {
    margin: 0 0 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--pin-red);
}
.fpt-pin-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--pin-ink);
}
.fpt-pin-title a {
    color: inherit;
}
.fpt-pin-title a:hover {
    color: var(--pin-ink);
    text-decoration: underline;
}
.fpt-pin-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pin-muted);
}

/* -------------------------------------------------------------------
 * Responsive column counts (the masonry has no auto-fill). 1024 / 820
 * follow the footer's existing breakpoints; 640 / 420 are the project's.
 * ------------------------------------------------------------------- */
@media (max-width: 820px) {
    .fpt-feed { column-count: 2; }
}
@media (max-width: 640px) {
    .fpt-feed { column-count: 2; column-gap: 12px; }
    .fpt-pin { margin-bottom: 16px; }
    .fpt-pin-tile { padding: 12px; min-height: 180px; }
    .fpt-pin-art { width: 84%; }
    .fpt-pin-open { right: 10px; bottom: 10px; padding: 7px 12px; font-size: 12px; }
}
@media (max-width: 420px) {
    /* One column: every tile becomes a short 4:3 card (a 2:3 pin at full
       width would be taller than the viewport). */
    .fpt-feed { column-count: 1; }
    .fpt-pin-tile { aspect-ratio: 4 / 3; min-height: 0; }
    .fpt-pin-art { width: 46%; }
}