/* Tierra Caliente Interiors — Shared Styles */

/* Google Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Talavera polka-dot pattern */
.talavera-pattern {
    background-color: #f8f6c3;
    background-image: radial-gradient(#815f00 0.5px, transparent 0.5px), radial-gradient(#815f00 0.5px, #f8f6c3 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    opacity: 0.1;
}

/* Pink seductive gradient */
.seductive-gradient {
    background: linear-gradient(135deg, #c60159 0%, #ff7198 100%);
}

/* Brass border trim */
.brass-trim {
    border: 1px solid rgba(129, 95, 0, 0.3);
}

/* Punched-tin mask effect */
.punched-tin {
    mask-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H18V20H20.5V20.5ZM20 0V2.5H18V0h2zm0 40V37.5H18V40h2zM0 20h2.5V18H0v2zm40 0h-2.5V18H40v2z' fill='%23000' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Diamond tile pattern (blog page hero) */
.tile-pattern {
    background-color: #f8f6c3;
    background-image:
        linear-gradient(30deg, #815f00 12%, transparent 12.5%, transparent 87%, #815f00 87.5%, #815f00),
        linear-gradient(150deg, #815f00 12%, transparent 12.5%, transparent 87%, #815f00 87.5%, #815f00),
        linear-gradient(30deg, #815f00 12%, transparent 12.5%, transparent 87%, #815f00 87.5%, #815f00),
        linear-gradient(150deg, #815f00 12%, transparent 12.5%, transparent 87%, #815f00 87.5%, #815f00),
        linear-gradient(60deg, #815f00 25%, transparent 25.5%, transparent 75%, #815f00 75%, #815f00),
        linear-gradient(60deg, #815f00 25%, transparent 25.5%, transparent 75%, #815f00 75%, #815f00);
    background-size: 40px 70px;
    background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;
    opacity: 0.05;
}

/* Dotted tin divider */
.tin-divider {
    height: 32px;
    background-color: transparent;
    background-image: radial-gradient(#815f00 2px, transparent 2px);
    background-size: 16px 16px;
    opacity: 0.3;
}

/* Tonal drenching gradients (about page) */
.bg-drench-fuchsia {
    background: linear-gradient(135deg, #c60159 0%, #b0004e 100%);
}
.bg-drench-emerald {
    background: linear-gradient(135deg, #007072 0%, #006364 100%);
}

/* Font size utility */
.text-20 {
    font-size: 1.25rem;
}