/* ========================================
   PINTEREST COMPONENTS
   ======================================== */

/* --- Buttons --- */
.button-primary {
    background: var(--clr-primary);
    color: var(--clr-on-primary);
    font-family: var(--ff-primary);
    font-size: var(--fs-button-md);
    font-weight: var(--fw-bold);
    padding: 6px 14px;
    height: var(--btn-height);
    border-radius: var(--rd-md);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.button-primary:hover, .button-primary:active {
    background: var(--clr-primary-pressed);
}

.button-secondary {
    background: var(--clr-secondary-bg);
    color: var(--clr-ink);
    font-family: var(--ff-primary);
    font-size: var(--fs-button-md);
    font-weight: var(--fw-bold);
    padding: 6px 14px;
    height: var(--btn-height);
    border-radius: var(--rd-md);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.button-secondary:hover, .button-secondary:active {
    background: var(--clr-secondary-pressed);
}

.button-tertiary {
    background: transparent;
    color: var(--clr-ink);
    font-family: var(--ff-primary);
    font-size: var(--fs-button-md);
    font-weight: var(--fw-bold);
    padding: 6px 14px;
    height: var(--btn-height);
    border-radius: var(--rd-md);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.button-tertiary:hover {
    background: var(--clr-surface-card);
}

.button-icon-circular {
    background: var(--clr-surface-card);
    color: var(--clr-ink);
    width: 40px;
    height: 40px;
    border-radius: var(--rd-full);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}
.button-icon-circular:hover {
    background: var(--clr-secondary-bg);
}

.button-icon-circular-sm {
    background: var(--clr-surface-card);
    color: var(--clr-ink);
    width: 32px;
    height: 32px;
    border-radius: var(--rd-full);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}
.button-icon-circular-sm .material-symbols-outlined {
    font-size: 18px;
}
.button-icon-circular-sm:hover {
    background: var(--clr-secondary-bg);
}

.button-pill-on-image {
    background: var(--clr-canvas);
    color: var(--clr-ink);
    font-family: var(--ff-primary);
    font-size: var(--fs-button-sm);
    font-weight: var(--fw-bold);
    padding: 6px 12px;
    border-radius: var(--rd-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pill-success { background: var(--clr-success-pale); color: var(--clr-success-deep); }
.pill-draft { background: var(--clr-ash); color: var(--clr-canvas); }
.pill-highlight { background: var(--clr-secondary-pressed); color: var(--clr-ink); }

/* --- Inputs --- */
.text-input {
    background: var(--clr-canvas);
    color: var(--clr-ink);
    border: 1px solid var(--clr-ash);
    font-family: var(--ff-primary);
    font-size: var(--fs-body-md);
    padding: 11px 15px;
    height: var(--input-height);
    border-radius: var(--rd-md);
    outline: none;
    width: 100%;
    transition: all 0.2s ease;
}

.text-input:focus {
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--clr-focus-inner), 0 0 0 6px var(--clr-focus-outer);
}

/* --- Switcher Toggle (Pinterest Style Pill) --- */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    min-width: 48px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--clr-ash);
    transition: .4s;
    border-radius: var(--rd-full);
    z-index: 1;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: var(--clr-canvas);
    transition: .4s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--clr-primary);
}

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 4px var(--clr-focus-outer);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.search-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 16px;
    color: var(--clr-mute);
    font-size: var(--fs-heading-md);
    pointer-events: none;
}

.search-bar {
    background: var(--clr-surface-card);
    color: var(--clr-ink);
    border: 1px solid transparent;
    font-family: var(--ff-primary);
    font-size: var(--fs-body-md);
    padding: 11px 15px 11px 40px; /* space for icon */
    height: var(--search-height);
    border-radius: var(--rd-full);
    outline: none;
    width: 100%;
    transition: all 0.2s ease;
}

.search-bar:focus {
    background: var(--clr-canvas);
    border-color: var(--clr-ash);
}

/* --- Cards --- */
.pin-card {
    background: var(--clr-surface-card);
    border-radius: var(--rd-md);
    padding: 0;
    overflow: hidden;
    position: relative;
    border: none;
    box-shadow: none;
}
.pin-card img {
    width: 100%;
    height: auto;
    display: block;
}

.pin-card-large {
    background: var(--clr-surface-card);
    border-radius: var(--rd-lg);
    padding: 0;
    overflow: hidden;
    position: relative;
    border: none;
    box-shadow: none;
}

.feature-card {
    background: var(--clr-canvas);
    border-radius: var(--rd-md);
    padding: var(--sp-xxl);
    border: none;
    box-shadow: none;
}

.feature-card-soft {
    background: var(--clr-surface-card);
    border-radius: var(--rd-md);
    padding: var(--sp-xxl);
    border: none;
    box-shadow: none;
}

.modal-card {
    background: var(--clr-canvas);
    border-radius: var(--rd-lg);
    padding: var(--sp-xxl);
    box-shadow: 0 0 16px rgba(0,0,0,0.1); /* 16px ambient shadow */
    border: none;
}

/* --- Masonry Grid --- */
.masonry-grid {
    column-count: 4;
    column-gap: var(--sp-sm);
}

.masonry-grid > * {
    break-inside: avoid;
    margin-bottom: var(--sp-sm);
}

@media (min-width: 1600px) { .masonry-grid { column-count: 5; } }
@media (min-width: 1920px) { .masonry-grid { column-count: 6; } }
@media (max-width: 1024px) { .masonry-grid { column-count: 3; } }
@media (max-width: 768px) { .masonry-grid { column-count: 2; } }
@media (max-width: 480px) { .masonry-grid { column-count: 1; } }

/* --- Pills & Chips --- */
.filter-chip-strip {
    display: flex;
    gap: var(--sp-sm);
    overflow-x: auto;
    padding-bottom: var(--sp-sm);
    margin-bottom: var(--sp-xl);
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.filter-chip-strip::-webkit-scrollbar {
    display: none;
}
.filter-chip {
    background: var(--clr-surface-card);
    color: var(--clr-ink);
    font-family: var(--ff-primary);
    font-size: var(--fs-button-md);
    font-weight: var(--fw-bold);
    padding: 8px 16px;
    border-radius: var(--rd-full);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.filter-chip.active, .filter-chip:hover {
    background: var(--clr-ink);
    color: var(--clr-on-dark);
}

/* --- Typography Utilities --- */
.text-display-xl { font-size: var(--fs-display-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-display-xl); line-height: var(--lh-display-xl); font-family: var(--ff-display); }
.text-display-lg { font-size: var(--fs-display-lg); font-weight: var(--fw-bold); letter-spacing: var(--ls-display-lg); line-height: var(--lh-display-lg); font-family: var(--ff-display); }
.text-heading-xl { font-size: var(--fs-heading-xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading-xl); line-height: var(--lh-heading-xl); font-family: var(--ff-display); }
.text-heading-lg { font-size: var(--fs-heading-lg); font-weight: var(--fw-semibold); line-height: var(--lh-heading-lg); font-family: var(--ff-display); }
.text-heading-md { font-size: var(--fs-heading-md); font-weight: var(--fw-semibold); line-height: var(--lh-heading-md); }
.text-body-md { font-size: var(--fs-body-md); font-weight: var(--fw-regular); line-height: var(--lh-body); }
.text-body-strong { font-size: var(--fs-body-md); font-weight: var(--fw-semibold); line-height: var(--lh-body); }
.text-body-sm { font-size: var(--fs-body-sm); font-weight: var(--fw-regular); line-height: var(--lh-body); }
.text-body-sm-strong { font-size: var(--fs-body-sm); font-weight: var(--fw-bold); line-height: var(--lh-body); }
.text-caption-md { font-size: var(--fs-caption-md); font-weight: var(--fw-medium); line-height: var(--lh-caption); }
.text-caption-sm { font-size: var(--fs-caption-sm); font-weight: var(--fw-regular); line-height: var(--lh-caption); }

.txt-mute { color: var(--clr-mute) !important; }
.text-warning { color: var(--clr-warning) !important; }
.text-ash { color: var(--clr-ash) !important; }

.bg-canvas { background: var(--clr-canvas) !important; }
.rd-sm { border-radius: var(--rd-sm) !important; }

.flex { display: flex !important; }
.items-center { align-items: center !important; }
.justify-center { justify-content: center !important; }
.gap-sm { gap: var(--sp-sm) !important; }
.flex-1 { flex: 1 !important; }
.d-block { display: block !important; }

.avatar-md { width: 48px; height: 48px; border-radius: var(--rd-full); object-fit: cover; }
.avatar-placeholder-md { width: 48px; height: 48px; border-radius: var(--rd-full); background: var(--clr-canvas); display: flex; align-items: center; justify-content: center; border: 1px solid var(--clr-hairline); }

.icon-md { font-size: var(--fs-heading-md) !important; }
.icon-lg { font-size: 20px !important; }

.flex-wrap { flex-wrap: wrap !important; }
.justify-between { justify-content: space-between !important; }
.justify-end { justify-content: flex-end !important; }

.pos-rel { position: relative !important; }
.pos-abs { position: absolute !important; }
.top-4 { top: 4px !important; }
.top-8 { top: 8px !important; }
.top-12 { top: 12px !important; }
.top-13 { top: 13px !important; }
.right-4 { right: 4px !important; }
.right-8 { right: 8px !important; }
.right-12 { right: 12px !important; }
.left-12 { left: 12px !important; }
.left-14 { left: 14px !important; }
.gap-8 { gap: 8px !important; }
.mr-4 { margin-right: 4px !important; }

.min-h-100 { min-height: 100px !important; }
.resize-v { resize: vertical !important; }
.max-w-240 { max-width: 240px !important; }
.h-auto { height: auto !important; }
.pt-8 { padding-top: 8px !important; }
.mt-xs { margin-top: var(--sp-xs) !important; }

.flex-col { flex-direction: column !important; }

.ml-sm { margin-left: var(--sp-sm) !important; }
.m-0 { margin: 0 !important; }
.h-200 { height: 200px !important; }
.w-32 { width: 32px !important; }
.h-32 { height: 32px !important; }
.fs-16 { font-size: var(--fs-body-md) !important; }
.pl-40 { padding-left: 40px !important; }
.w-full { width: 100% !important; }
.rd-full { border-radius: var(--rd-full) !important; }
.max-w-400 { max-width: 400px !important; }
.z-10 { z-index: 10 !important; }
.text-center { text-align: center !important; }

.divider { border-top: 1px solid var(--clr-hairline) !important; width: 100% !important; }
.my-md { margin-top: var(--sp-md) !important; margin-bottom: var(--sp-md) !important; }
.my-xs { margin-top: var(--sp-xs) !important; margin-bottom: var(--sp-xs) !important; }

/* --- Pagination UI --- */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--sp-section);
    margin-bottom: var(--sp-section);
    gap: var(--sp-sm);
}

.pagination-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--rd-md);
    font-family: var(--ff-primary);
    font-weight: 600;
    font-size: var(--fs-body-sm);
    text-decoration: none;
    color: var(--clr-ink);
    background-color: var(--clr-surface-card);
    transition: background-color 0.2s, transform 0.1s;
    cursor: pointer;
}

.pagination-btn:hover {
    background-color: var(--clr-secondary-bg);
}

.pagination-btn:active {
    background-color: var(--clr-secondary-pressed);
    transform: scale(0.97);
}

.pagination-btn.active {
    background-color: var(--clr-primary);
    color: var(--clr-canvas);
}

.pagination-btn.active:hover {
    background-color: var(--clr-primary-pressed);
}

.pagination-btn.disabled {
    background-color: var(--clr-surface-card);
    color: var(--clr-ash);
    cursor: not-allowed;
    transform: none;
}

/* --- Avatars --- */
.avatar-md, .avatar-placeholder-md {
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--rd-full) !important;
    object-fit: cover;
    flex-shrink: 0;
}
.avatar-placeholder-md {
    background-color: var(--clr-surface-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-mute);
}

/* --- File Upload Zone --- */
.file-drop-zone {
    position: relative;
    background: var(--clr-surface-card);
    border: 1px dashed var(--clr-ash);
    border-radius: var(--rd-md);
    padding: var(--sp-xl);
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}
.file-drop-zone:hover {
    background: var(--clr-secondary-bg);
    border-color: var(--clr-ink);
}
.file-drop-zone input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}
.file-drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    gap: var(--sp-sm);
}