/* Component and layout styles (moved from styles.css for clarity)
   Includes hero, video, about, products/carousel, customization, adornments, cta, footer and responsive rules.
*/

/* Hero Section com Vídeo */
section {
    padding: 100px 0;
}

/* Header text color (make navigation / header text black for better contrast) */
header,
header nav a,
header .logo,
header .logo img {
    color: #000000;
}

header nav a {
    color: #000000;
    text-decoration: none;
    transition: color 0.15s ease;
}

header nav a:hover,
header nav a:focus,
header nav a.active {
    color: #0b2545; /* keep a darker accent on hover/active for affordance */
}

h2.section-title {
    text-align: center;
    margin-bottom: 4rem;
}

h2.section-title:after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background-color: var(--primary);
}

.subtitle {
    font-size: 1.2rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto 2rem;
}

/* NEW: more spacing for hero buttons and gap between them */
.hero-buttons {
    margin-top: 28px;            /* moves the button block further away from the subtitle */
    display: inline-flex;
    gap: 16px;                   /* spacing between the two buttons */
    justify-content: center;
    align-items: center;
}

/* Slightly smaller button padding on narrow screens to keep spacing pleasant */
@media (max-width: 576px) {
    .hero-buttons { margin-top: 20px; gap: 12px; }
    .btn { padding: 12px 20px; }
}

.hero {
    padding-top: 120px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(244,248,255,0.9) 40%, rgba(247,243,255,0.95) 100%),
      url('./2909361-luxo-abstrato-banner-fundo-moderno-formas-geometricas-e-ouro-linha-arte-papel-de-parede-design-para-site-impressoes-capa-fundo-parede-arte-e-decoracao-de-parede-vetor.jpg');
    background-size: cover;
    background-position: center;
    margin-bottom: 0;
}

.video-container {
    max-width: 1000px;
    margin: 0 auto 30px;
    overflow: hidden;
    position: relative;
    background: transparent;
    border-radius: 6px;
}

.hero-video {
    width: 100%;
    height: 560px;
    display: block;
    object-fit: cover;
    border-radius: 6px;
    background-color: #000;
    outline: none;
    border: none;
}

/* Keep native video controls visible so users can play/pause/seek on all devices.
   Hiding native controls previously prevented interaction and made the video appear invisible
   in some browsers. */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-enclosure,
.hero-video::-webkit-media-controls-panel,
.hero-video::-webkit-media-controls-overlay-play-button,
.hero-video::-webkit-media-controls-start-playback-button {
    /* do not hide native controls */
    display: inherit !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.hero-video::-webkit-media-controls-overlay-enclosure { display: inherit !important; }
.hero-video::-moz-media-controls { display: inherit !important; }

/* About */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Mobile tweak: make the about heading more compact and allow soft wrapping
   so "Artesanato que Conecta Tradição e Luxo" fits nicely on small screens. */
@media (max-width: 576px) {
    .about-content .about-text h3 {
        font-size: 1.25rem;       /* reduce size for mobile */
        line-height: 1.2;         /* tighten line-height */
        word-break: break-word;   /* allow wrapping on long words */
        white-space: normal;      /* ensure wrapping */
        hyphens: auto;            /* allow hyphenation if necessary */
        margin-bottom: 0.6rem;
    }
}

.chemical-image {
    width: 100%;
    max-width: 500px;
    background-color: #ffffff; /* white canvas for product/person photos */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    max-width: 420px;
    margin: 0 auto;
    min-height: 0;

    /* Rounded card look (tab-like) */
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(16,34,53,0.04);
}

/* Ensure any media inside the chemical-image shows on white and is centered */
.chemical-image img,
.chemical-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #ffffff;
    display: block;
    /* soft rounded corners to match container */
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(16,34,53,0.06);
    border: 6px solid rgba(255,255,255,0.95);
}

/* Variant used for the "Inspeção de Qualidade" card: keep image perfectly circular
   and remove the white square background/border while preserving center crop. */
.chemical-image.inspection {
    background: transparent;          /* remove white card background */
    border: none;                     /* remove outer border */
    padding: 0;                       /* remove internal padding so image fills */
    border-radius: 50%;               /* make container circular */
    width: 320px;                     /* fixed-ish size to keep shape consistent */
    max-width: 60%;
    aspect-ratio: 1 / 1;
    overflow: hidden;                 /* clip any white from the image itself */
    box-shadow: 0 8px 24px rgba(16,34,53,0.06);
    margin: 0 auto;
}

/* ensure the media inside the inspection variant is fully circular and has no white border */
.chemical-image.inspection img,
.chemical-image.inspection video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    border: none;
    display: block;
}

/* Pill-style tab label */
.chemical-image::before {
    content: attr(data-title);
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.6px;
    background: var(--primary);
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(11,37,69,0.08);
    transform: translateY(0);
}

/* Products / Carousel */
.products {
    background-color: var(--light);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 auto;
}

.carousel-track-wrapper { overflow: hidden; width: 100%; }
.carousel-track {
    display: flex;
    gap: 24px;
    align-items: stretch;
    transition: transform 0.6s linear;
    will-change: transform;
}
.carousel .product-card { min-width: 320px; flex: 0 0 320px; }

.carousel-btn {
    background: rgba(11,37,69,0.9);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    transition: background 0.18s ease, transform 0.18s ease;
    border-radius: 4px;
}
.carousel-btn:hover { transform: scale(1.05); background: rgba(11,37,69,1); }

.product-card {
    background-color: var(--light);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

.product-img {
    height: 280px;
    background-color: #ffffff; /* show product images on a white canvas */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

/* Force images to sit on white, be centered and crop nicely */
.product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* keep shoe proportions and show against white */
    object-position: center;
    background: #ffffff;
    transition: transform 0.5s ease;
    display: block;
}

/* Video inside product card: match sizing and behavior to images */
.product-card-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* show dynamic view, crop softly */
    display: block;
    background: #000;
    transition: transform 0.35s ease;
    pointer-events: auto; /* allow native controls when needed */
}

/* Slight zoom on hover to match image behavior */
.product-card:hover .product-card-video { transform: scale(1.03); }

.product-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: var(--primary);
    color: var(--light);
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 1px;
    z-index: 2;
}

.product-info { padding: 30px; }
.price { font-size: 1.4rem; font-weight: 400; color: var(--primary); margin-bottom: 25px; }

/* Personalização & Adornos */
.customization-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.adornments-grid {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 10px;
}

.adornment-card {
    background: var(--light);
    border: 1px solid var(--border);
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-sizing: border-box;
    flex: 0 0 calc(50% - 12px);
    max-width: 480px;
}
.adornment-card img {
    width: 100%;
    height: 180px;
    object-fit: contain; /* keep adornment proportions and show on white */
    object-position: center;
    border-radius: 4px;
    display: block;
    margin-bottom: 12px;
    background: #ffffff; /* ensure white background */
}
.adornment-caption { font-size: 0.95rem; color: var(--text-light); text-align: center; padding: 6px 8px; }

/* CTA */
.cta {
    text-align: center;
    background-color: var(--light-gray);
    padding: 120px 0;
}

/* WhatsApp button - use green color matching WhatsApp brand for clear affordance */
.btn-whatsapp {
    background-color: #25D366;
    color: #ffffff;
    border-color: rgba(0,0,0,0.06);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-weight: 600;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-whatsapp:hover,
.btn-whatsapp:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37,211,102,0.12);
    background-color: #1ebe57; /* slightly darker on hover */
}

/* Footer */
footer {
    background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
    color: var(--light);
    padding: 80px 0 40px;
}

/* Force footer text and links to use white (override previous color rules) */
footer,
footer a,
footer .footer-column h3,
footer .footer-column p,
footer .footer-links li,
footer .copyright p {
    color: #ffffff !important;
}

/* Center the copyright text */
footer .copyright p {
    text-align: center !important;
}

/* maintain footer link hover/focus contrast */
footer a:hover,
footer a:focus {
    color: #ffffff !important;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 60px;
    margin-bottom: 60px;
}
.footer-column h3 { color: var(--light); margin-bottom: 25px; font-size: 1.1rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; }

/* Center text for section content (centralizar textos das abas) */
section .container,
section .container h1,
section .container h2,
section .container h3,
section .container p,
section .container .subtitle,
section .container .section-title {
    text-align: center;
}

/* Keep multi-column layouts but center inner text blocks */
.about-content .about-text,
.footer-column,
.product-info,
.adornment-caption,
.customization-steps .step {
    text-align: center;
}

/* Ensure left-aligned items that should stay left (e.g., nav lists) are not affected */
nav ul,
.footer-links,
.product-card .product-info {
    text-align: left;
}

/* Slide-in animation for the about paragraph (left -> right) */
@keyframes slideLeftToRight {
    0% {
        transform: translateX(-32px);
        opacity: 0;
    }
    60% {
        transform: translateX(8px);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in {
    display: inline-block;
    transform: translateX(-32px);
    opacity: 0;
    animation: slideLeftToRight 800ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
}

/* Reveal-on-scroll for .chemical-image cards (Processo de fabricação / Inspeção de Qualidade) */
.chemical-image {
    opacity: 0;
    transform: translateY(28px) scale(0.995);
    will-change: transform, opacity;
    transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* slightly stronger effect for the circular inspection variant */
.chemical-image.inspection {
    transform: translateY(40px) scale(0.98);
    transition-duration: 560ms;
}

/* when the element is observed in viewport, apply final styles */
.chemical-image.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* small stagger helper: if multiple chemical-image siblings, apply slight delays */
.chemical-image.in-view[data-delay="1"] { transition-delay: 80ms; }
.chemical-image.in-view[data-delay="2"] { transition-delay: 140ms; }
.chemical-image.in-view[data-delay="3"] { transition-delay: 200ms; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .chemical-image,
    .chemical-image.inspection,
    .chemical-image.in-view {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* General step entrance animation (hidden by default) */
.customization-steps .step {
    opacity: 0;
    transform: translateX(-40px);
    will-change: transform, opacity;
}

/* Keyframes for step entrance (left -> right) */
@keyframes stepEnter {
    0% {
        transform: translateX(-40px);
        opacity: 0;
    }
    60% {
        transform: translateX(6px);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Triggered staggered animations for steps when they enter viewport (applies on .in-view) */
.customization-steps .step.in-view {
    animation: stepEnter 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
    /* default delay if not overridden via data-order */
    animation-delay: 180ms;
}

/* Specific delays by order to ensure appearing in numeric sequence */
.customization-steps .step.in-view[data-order="1"] { animation-delay: 180ms; }
.customization-steps .step.in-view[data-order="2"] { animation-delay: 360ms; }
.customization-steps .step.in-view[data-order="3"] { animation-delay: 540ms; }
.customization-steps .step.in-view[data-order="4"] { animation-delay: 720ms; }

/* Maintain compatibility for the already-targeted .step-1 class (no conflict) */
.step-1 {
    /* kept in sync with the general step rules but allowing legacy specificity */
}

/* Respect user preference for reduced motion (disable step animation if requested) */
@media (prefers-reduced-motion: reduce) {
    .slide-in,
    .customization-steps .step,
    .step-1 {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .about-content { grid-template-columns: 1fr; gap: 60px; }
}

@media (max-width: 768px) {
    .hero { padding-top: 180px; }
    .hero-video { height: 400px; }
    .carousel .product-card { min-width: 260px; flex: 0 0 260px; }
    .adornment-card img { height: 120px; }
}

@media (max-width: 576px) {
    section { padding: 70px 0; }
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    .carousel .product-card { min-width: 220px; flex: 0 0 220px; }
    .adornments-grid { flex-wrap: wrap; gap: 12px; justify-content: center; }
    .adornment-card { flex: 0 0 48%; max-width: 48%; padding: 8px; }
}