/**
 * Single Materiais Styles - Blog Parceiros iFood
 * 
 * Estilos específicos para single page do CPT "materiais-gratuitos"
 * Baseado no single-page-design.css com adaptações para layout personalizado
 * 
 * DEPENDÊNCIAS: variables.css, components.css (sempre usar array('ifp-components'))
 * LAYOUT: Hero simplificado + Coluna única com 2 colunas internas
 * 
 * @version 1.0.0
 */

/* WP ULike Plugin Styles - Idêntico à single original */
.wpulike {
    padding: 0 !important;
}

/* Estilos do WP ULike para usar visual da media query tablet */
.ifp-materiais-like-button .wpulike .wp_ulike_general_class {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.ifp-materiais-like-button .wpulike .wp_ulike_general_class .wp_ulike_btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important; /* Padding da media query tablet */
    background: transparent !important; /* Background transparente da media query tablet */
    color: #4A5568 !important;
    border: none !important;
    border-radius: 0 !important; /* Border radius 20px da media query tablet */
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.ifp-materiais-like-button .wpulike .wp_ulike_general_class .wp_ulike_btn:hover {
    background: #FEF5F0 !important; /* Hover background da media query tablet */
    color: #EB0033 !important;
    border-color: #EB0033 !important;
}

/* SVG do WP ULike - Reset completo igual ao fallback */
.ifp-materiais-like-button .wpulike .wp_ulike_general_class .wp_ulike_btn svg {
    width: 16px !important;
    height: 16px !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    border: none !important; /* Remove qualquer border */
    border-radius: 0 !important; /* Remove qualquer border-radius */
    background: none !important; /* Remove qualquer background */
    padding: 0 !important; /* Remove qualquer padding */
    margin: 0 !important; /* Remove qualquer margin */
    box-shadow: none !important; /* Remove qualquer box-shadow */
    overflow: visible !important; /* Garante que SVG não seja cortado pelo border-radius do container */
    display: block !important; /* Remove espaços inline que podem criar aparência de borda */
}

/* Hover do SVG do WP ULike */
.ifp-materiais-like-button .wpulike .wp_ulike_general_class .wp_ulike_btn:hover svg {
    stroke: #EB0033 !important;
    fill: rgba(235, 0, 51, 0.1) !important;
}

/* ========================================
   LAYOUT STRUCTURE - MATERIAIS
   ======================================== */

/* ESPECIFICIDADE MÁXIMA - Sobrescreve conflitos */
html body.single-materiais-gratuitos .ifp-materiais-single-page,
html body.single .ifp-materiais-single-page,
html body .ifp-materiais-single-page {
    background-color: #F9F2E8 !important;
    background: #F9F2E8 !important;
    min-height: 100vh !important;
    font-family: "TipoiFoodVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Banner top ativo - remove margin-top */
html body.has-top-banner.single-materiais-gratuitos .site-content,
html body.has-top-banner.single .site-content {
    margin-top: 0 !important;
}

/* ========================================
   HERO SECTION SIMPLIFICADA - MATERIAIS
   ======================================== */

/* Hero Section com especificidade máxima */
html body.single-materiais-gratuitos .ifp-materiais-single-hero,
html body.single .ifp-materiais-single-hero,
html body .ifp-materiais-single-hero {
    background: var(--red-Vermelho-iFood, #EB0033) !important;
    background-color: #EB0033 !important;
    color: white !important;
    display: flex !important;
    padding: 60px 0 60px 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 33px !important;
    align-self: stretch !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
}

/* Hero Container */
html body.single-materiais-gratuitos .ifp-materiais-hero__container,
html body.single .ifp-materiais-single-hero .ifp-materiais-hero__container,
html body .ifp-materiais-single-hero .ifp-materiais-hero__container {
    max-width: 1280px !important;
    width: 100% !important;
    padding: 0 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important; /* Gap menor para hero simplificada */
    box-sizing: border-box !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 11 !important;
}

/* Título Hero dos Materiais */
.ifp-materiais-hero__title {
    font-size: clamp(32px, 5vw, 40px) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: white !important;
    margin: 0 !important;
    font-family: "Tipo iFood Titulos", "TipoiFoodVariable", sans-serif !important;
}

/* Breadcrumb dos Materiais - herda estilos existentes */
.ifp-materiais-single-hero .ifp-breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: white !important;
    font-weight: 500 !important;
}

.ifp-materiais-single-hero .ifp-breadcrumb a {
    color: white !important;
    text-decoration: none !important;
}

.ifp-materiais-single-hero .ifp-breadcrumb a:hover {
    opacity: 0.8 !important;
}

.ifp-materiais-single-hero .ifp-breadcrumb__separator {
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 4px !important;
    font-weight: 400 !important;
}

.ifp-materiais-single-hero .ifp-breadcrumb__current {
    color: white !important;
    opacity: 0.8 !important;
}

/* ========================================
   MAIN CONTENT AREA - MATERIAIS
   ======================================== */

/* Container Principal */
/* Main section - ESPECIFICIDADE MÁXIMA */
html body.single-materiais-gratuitos .ifp-materiais-single-main,
html body.single .ifp-materiais-single-main,
html body .ifp-materiais-single-main {
    padding: var(--ifp-spacing-sm, 1rem) 0 !important;
    background: #F9F2E8 !important;
    min-height: 60vh !important;
    display: block !important; /* Força layout em bloco */
}

/* Container principal - ESPECIFICIDADE MÁXIMA para sobrescrever single-page-design.css */
html body.single-materiais-gratuitos .ifp-materiais-main__container,
html body.single .ifp-materiais-main__container,
html body .ifp-materiais-main__container {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 var(--ifp-spacing-lg, 1.5rem) !important;
    box-sizing: border-box !important;
    display: block !important; /* FORÇAR layout em linhas, NÃO grid/flex */
    width: 100% !important;
    grid-template-columns: unset !important; /* Remove qualquer grid herdado */
    grid-template-rows: unset !important; /* Remove qualquer grid herdado */
    gap: unset !important; /* Remove gap herdado */
    flex-direction: unset !important; /* Remove flex herdado */
}

/* ========================================
   BARRA SOCIAL HORIZONTAL
   ======================================== */

.ifp-materiais-social-bar {
    display: flex !important;
    gap: var(--ifp-spacing-3xl, 3rem) !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: var(--ifp-spacing-lg, 1.5rem) 0 !important;
    border-bottom: 1px solid var(--ifp-color-gray-200, #E5E5E5) !important;
    margin-bottom: var(--ifp-spacing-xl, 1.5rem) !important;
}

.ifp-materiais-social-section {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--ifp-spacing-md, 1rem) !important;
    align-items: center !important;
}

.ifp-materiais-social-title {
    font-family: var(--ifp-font-primary, "TipoiFoodVariable") !important;
    font-size: 1.125rem !important;
    font-weight: var(--ifp-font-weight-semibold, 600) !important;
    color: var(--ifp-color-gray-900, #1A1A1A) !important;
    margin: 0 !important;
}

/* Botões sociais - usando estilos da media query tablet (769px-1300px) */
.ifp-materiais-social-buttons {
    display: flex !important;
    gap: 8px !important; /* Gap específico da media query tablet */
    align-items: center !important;
}

/* Estilos dos ícones sociais - idênticos à media query tablet da single original */
.ifp-materiais-social-buttons .ifp-sidebar-left__social-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important; /* 32px da media query tablet */
    height: 32px !important;
    border-radius: 6px !important; /* 6px da media query tablet */
    background-color: rgba(0,0,0,0.05) !important; /* Background específico da media query tablet */
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: none !important; /* Remove border */
}

.ifp-materiais-social-buttons .ifp-sidebar-left__social-icon:hover {
    background-color: rgba(0,0,0,0.1) !important; /* Hover mais escuro */
    transform: none !important; /* Remove transform */
    text-decoration: none !important;
}

.ifp-materiais-social-buttons .ifp-sidebar-left__social-icon img {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

/* Botão de like - usando classes originais da single */
.ifp-materiais-like-button {
    display: flex !important;
    align-items: center !important;
}

/* Estilos do botão de like - idênticos à media query tablet (769px-1300px) */
.ifp-materiais-like-button .ifp-sidebar-left__like-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important; /* Padding da media query tablet */
    background: transparent !important; /* Background transparente da media query tablet */
    color: #4A5568 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important; /* Border radius 20px da media query tablet */
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important; /* Prevent text wrapping */
}

.ifp-materiais-like-button .ifp-sidebar-left__like-btn:hover {
    background: #FEF5F0 !important; /* Hover background da media query tablet */
    color: #EB0033 !important;
    border-color: #EB0033 !important;
}

.ifp-materiais-like-button .ifp-sidebar-left__like-btn svg {
    width: 16px !important;
    height: 16px !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    border: none !important; /* Remove qualquer border */
    border-radius: 0 !important; /* Remove qualquer border-radius */
    background: none !important; /* Remove qualquer background */
    padding: 0 !important; /* Remove qualquer padding */
    margin: 0 !important; /* Remove qualquer margin */
    box-shadow: none !important; /* Remove qualquer box-shadow */
    overflow: visible !important; /* Garante que SVG não seja cortado pelo border-radius do container */
    display: block !important; /* Remove espaços inline que podem criar aparência de borda */
}

.ifp-materiais-like-button .ifp-sidebar-left__like-btn:hover svg {
    stroke: #EB0033 !important;
    fill: rgba(235, 0, 51, 0.1) !important;
}

/* ========================================
   ÁREA DE CONTEÚDO - 2 COLUNAS
   ======================================== */

/* Container branco unificado */
.ifp-materiais-content-container {
    background: white !important;
    border-radius: var(--ifp-radius-xl, 1rem) !important;
    box-shadow: var(--ifp-shadow-sm, 0 1px 3px rgba(0,0,0,0.1)) !important;
    overflow: visible !important;
    margin: var(--ifp-spacing-xl, 1.5rem) 0 !important;
}

.ifp-materiais-content-area {
    display: grid !important;
    grid-template-columns: 1fr 45% !important;
    gap: 0 !important;
    align-items: stretch !important;
    min-height: 400px !important;
    overflow: visible !important; /* Garante que conteúdo sticky não seja cortado */
}


/* Coluna Esquerda - Conteúdo (60%) */
.ifp-materiais-content-column--left {
    background: transparent !important;
    border-radius: 0 !important;
    padding: var(--ifp-spacing-2xl, 2rem) !important;
    box-shadow: none !important;
    min-height: 100% !important;
}

.ifp-materiais-content {
    font-size: 1.125rem !important;
    line-height: 1.7 !important;
    color: var(--ifp-color-gray-800, #2D3748) !important;
}

.ifp-materiais-content h2,
.ifp-materiais-content h3,
.ifp-materiais-content h4 {
    font-family: "Tipo iFood Titulos", var(--ifp-font-primary) !important;
    color: var(--ifp-color-gray-900, #1A1A1A) !important;
    margin-top: var(--ifp-spacing-xl, 1.5rem) !important;
    margin-bottom: var(--ifp-spacing-md, 1rem) !important;
}

.ifp-materiais-content p {
    margin-bottom: var(--ifp-spacing-md, 1rem) !important;
}

.ifp-materiais-meta {
    margin-top: var(--ifp-spacing-2xl, 2rem) !important;
    padding-top: var(--ifp-spacing-lg, 1.5rem) !important;
    border-top: 1px solid var(--ifp-color-gray-200, #E5E5E5) !important;
}

/* Coluna Direita - Conteúdo Direto (40%) */
.ifp-materiais-content-column--right {
    position: sticky !important;
    top: 120px !important; /* Offset para header fixo */
    padding: 20px !important; /* Padding para todos os elementos da coluna direita */
    align-self: start !important; /* Garante alinhamento correto para sticky */
    height: fit-content !important; /* Altura baseada no conteúdo */
    max-height: calc(100vh - 140px) !important; /* Evita overflow do viewport */
    overflow-y: auto !important; /* Permite scroll se conteúdo for muito alto */
}

/* ========================================
   FORMULÁRIO DE DOWNLOAD - OTIMIZADO
   ======================================== */

.ifp-download-form {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--ifp-spacing-lg, 1.5rem) !important;
}

.ifp-download-form__field {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--ifp-spacing-xs, 0.25rem) !important;
}

/* ========================================
   SEÇÃO DE MATERIAIS RELACIONADOS
   ======================================== */

.ifp-materiais-related-section {
    margin: var(--ifp-spacing-xl, 1.5rem) 0 !important;
}

.ifp-materiais-related {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding: var(--ifp-spacing-2xl, 2rem) !important;
}

.ifp-materiais-related__title {
    font-family: "Tipo iFood Titulos", var(--ifp-font-primary) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--ifp-color-gray-900, #1A1A1A) !important;
    margin: 0 0 var(--ifp-spacing-2xl, 2rem) 0 !important;
    text-align: center !important;
}

.ifp-materiais-related__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: var(--ifp-spacing-xl, 1.5rem) !important;
    align-items: stretch !important; /* Força cards a terem mesma altura */
}

/* ========================================
   CARDS DE MATERIAIS RELACIONADOS - FEATURED STYLE
   ======================================== */

/* Cards relacionados usam layout horizontal (duas colunas) */
.ifp-materiais-related__grid .ifp-materiais-card.ifp-featured-card {
    background: white !important;
    border: 1px solid var(--ifp-color-gray-200, #E5E5E5) !important;
    border-radius: var(--ifp-radius-lg, 0.5rem) !important;
    overflow: hidden !important;
    transition: all var(--ifp-transition-fast) !important;
    height: 100% !important; /* Ocupa toda altura do grid item */
    min-height: 200px !important; /* Altura mínima consistente */
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    align-self: stretch !important; /* Força esticamento */
}

.ifp-materiais-related__grid .ifp-materiais-card.ifp-featured-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--ifp-shadow-md, 0 4px 6px rgba(0,0,0,0.1)) !important;
    border-color: var(--ifp-color-primary, #EB0033) !important;
}

/* Conteúdo do card - coluna esquerda (65%) */
.ifp-materiais-related__grid .ifp-materiais-card__content.ifp-featured-card__content {
    flex: 1 1 65% !important;
    padding: var(--ifp-spacing-lg, 1.5rem) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--ifp-spacing-md, 1rem) !important;
    justify-content: flex-start !important;
}

/* Tags no topo dos cards */
.ifp-materiais-related__grid .ifp-materiais-card__tags.ifp-featured-card__tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--ifp-spacing-xs, 0.5rem) !important;
    margin-bottom: var(--ifp-spacing-sm, 0.5rem) !important;
}

/* Título do card relacionado */
.ifp-materiais-related__grid .ifp-materiais-card__title.ifp-featured-card__title {
    font-family: "Tipo iFood Titulos", var(--ifp-font-primary) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
    color: var(--ifp-color-gray-900, #1A1A1A) !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    line-clamp: 3 !important;
    overflow: hidden !important;
}

.ifp-materiais-related__grid .ifp-materiais-card__title-link.ifp-featured-card__title-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
}

.ifp-materiais-related__grid .ifp-materiais-card.ifp-featured-card:hover .ifp-materiais-card__title.ifp-featured-card__title {
    color: var(--ifp-color-primary, #EB0033) !important;
}

/* Meta informações (data) */
.ifp-materiais-related__grid .ifp-materiais-card__meta.ifp-featured-card__meta {
    display: flex !important;
    align-items: center !important;
    gap: var(--ifp-spacing-sm, 0.5rem) !important;
    margin-top: auto !important;
}

.ifp-materiais-related__grid .ifp-materiais-card__date.ifp-featured-card__date {
    font-size: 0.875rem !important;
    color: var(--ifp-color-gray-600, #718096) !important;
    font-weight: 500 !important;
}

/* Imagem do card relacionado - coluna direita (35%) */
.ifp-materiais-related__grid .ifp-materiais-card__image.ifp-featured-card__image {
    flex: 1 1 35% !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 120px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    position: relative !important;
    background: var(--ifp-color-gray-100, #F7FAFC) !important;
}

.ifp-materiais-related__grid .ifp-materiais-card__image.ifp-featured-card__image img {
    width: 100% !important;
    height: 100% !important;
    min-height: 120px !important;
    object-fit: cover !important;
    transition: transform var(--ifp-transition-fast) !important;
}

.ifp-materiais-related__grid .ifp-materiais-card.ifp-featured-card:hover .ifp-materiais-card__image.ifp-featured-card__image img {
    transform: scale(1.05) !important;
}

/* Imagem padrão quando não há thumbnail - Copiado de materiais-archive.css */
.ifp-materiais-related__grid .ifp-materiais-card__default-image {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--ifp-color-gray-100, #F5F5F5) !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.ifp-materiais-related__grid .ifp-materiais-card__default-image img {
    max-width: 60% !important;
    max-height: 60% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* ========================================
   SEÇÃO DE COMENTÁRIOS - CONTAINER APENAS
   ======================================== */

.ifp-materiais-comments-section {
    overflow: hidden !important;
    margin: var(--ifp-spacing-xl, 1.5rem) 0 !important;
    display: flex;
    justify-content: center;
}

.ifp-materiais-comments-section .ifp-comments-section {
    padding: 1rem 3rem !important;
    margin-top: 0 !important;
    width: 1000px;
}

/* Nota: Estilos de comentários movidos para comments-module.css */

/* ========================================
   FORMULÁRIO DE DOWNLOAD
   ======================================== */

/* Container principal do formulário - Visual personalizado */
.ifp-download-form-container {
    background-color: #FDF8F1 !important; /* Background bege especificado */
    border-radius: 20px !important; /* Border-radius solicitado */
    padding: 30px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; /* Sombra sutil */
    transition: all 0.3s ease !important;
}

.ifp-download-form-container:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important; /* Sombra mais intensa no hover */
}

/* Título do formulário */
.ifp-download-form__title {
    font-family: "Tipo iFood Titulos", var(--ifp-font-primary) !important;
    color: var(--ifp-color-gray-900, #1A1A1A) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}

/* Campos do formulário */
.ifp-download-form__label {
    display: block !important;
    color: var(--ifp-color-gray-800, #2D3748) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    font-size: 0.95rem !important;
}

.ifp-download-form__input {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid #E8E5E0 !important; /* Borda neutra que combina com o bege */
    border-radius: 8px !important;
    background: white !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.ifp-download-form__input:focus {
    outline: none !important;
    border-color: var(--ifp-color-primary, #EB0033) !important;
    box-shadow: 0 0 0 3px rgba(235, 0, 51, 0.1) !important;
}

/* Checkbox de política de privacidade */
.ifp-download-form__checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 25px !important;
}

.ifp-download-form__checkbox input[type="checkbox"] {
    margin: 2px 0 0 0 !important;
    width: auto !important;
}

.ifp-download-form__checkbox label {
    font-size: 0.9rem !important;
    color: var(--ifp-color-gray-700, #4A5568) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.ifp-download-form__checkbox a {
    color: var(--ifp-color-primary, #EB0033) !important;
    text-decoration: underline !important;
}

/* Botão de submit */
.ifp-download-form__button {
    width: 100% !important;
    padding: 14px 20px !important;
    background: var(--ifp-color-primary, #EB0033) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.ifp-download-form__button:hover:not(:disabled) {
    background: var(--ifp-color-accent, #890019) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(235, 0, 51, 0.3) !important;
}

.ifp-download-form__button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Info de privacidade */
.ifp-download-form__info {
    text-align: center !important;
    margin-top: 15px !important;
}

.ifp-download-form__info small {
    color: var(--ifp-color-gray-600, #718096) !important;
    font-size: 0.85rem !important;
}

/* ========================================
   RESPONSIVIDADE
   ======================================== */

@media (max-width: 1024px) {
    .ifp-materiais-content-area {
        grid-template-columns: 1fr 350px !important; /* Colunas menores no tablet */
        gap: 0 !important;
    }
}

@media (max-width: 768px) {
    /* Hero responsivo */
    .ifp-materiais-single-hero {
        padding: 40px 0 40px 0 !important;
    }
    
    .ifp-materiais-single-hero .ifp-single-hero__container {
        padding: 0 1rem !important;
        gap: 15px !important;
    }
    
    .ifp-materiais-hero__title {
        font-size: 1.875rem !important; /* 30px */
    }
    
    /* Breadcrumb responsivo - regras avançadas copiadas do single normal */
    .ifp-materiais-single-hero .ifp-breadcrumb {
        font-size: 12px !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
        line-height: 1.4 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    .ifp-materiais-single-hero .ifp-breadcrumb .ifp-breadcrumb__current {
        max-width: 200px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
    
    /* Breadcrumb dos materiais: mostra todos os itens com quebra natural */
    /* Todos os itens intermediários são mantidos visíveis */
    /* Apenas o título é truncado se necessário */
    
    /* Social bar responsivo */
    .ifp-materiais-social-bar {
        flex-direction: column !important;
        gap: var(--ifp-spacing-lg, 1.5rem) !important;
        padding: var(--ifp-spacing-md, 1rem) 0 !important;
    }
    
    /* Layout em coluna única no mobile (empilhamento vertical) */
    .ifp-materiais-content-area {
        grid-template-columns: 1fr !important; /* Uma única coluna no mobile */
        gap: 0 !important;
    }
    
    .ifp-materiais-content-column--left {
        border-right: none !important;
        border-bottom: 1px solid var(--ifp-color-gray-200, #E5E5E5) !important;
        padding: var(--ifp-spacing-lg, 1.5rem) !important;
    }
    
    .ifp-materiais-content-column--right {
        position: static !important;
        order: -1 !important; /* Conteúdo da sidebar aparece primeiro no mobile */
        padding: 15px !important; /* Padding menor no mobile */
        height: auto !important; /* Remove altura específica no mobile */
        max-height: none !important; /* Remove limitação de altura no mobile */
        overflow-y: visible !important; /* Remove scroll no mobile */
        align-self: auto !important; /* Remove alinhamento específico no mobile */
    }
    
    /* Formulário responsivo */
    .ifp-download-form-container {
        padding: 20px !important; /* Padding menor no mobile */
        border-radius: 16px !important; /* Border-radius menor no mobile */
    }
    
    .ifp-download-form__title {
        font-size: 1.25rem !important; /* Título menor no mobile */
    }
    
    html body.single-materiais-gratuitos .ifp-materiais-main__container,
    html body.single .ifp-materiais-main__container,
    html body .ifp-materiais-main__container {
        padding: 0 1rem !important;
        display: block !important; /* Manter layout em linhas no mobile */
    }
    
    /* Related materials responsivo */
    .ifp-materiais-related__grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Cards relacionados no mobile - layout vertical (imagem acima, conteúdo abaixo) */
    .ifp-materiais-related__grid .ifp-materiais-card.ifp-featured-card {
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important; /* Remove altura fixa no mobile */
        min-height: auto !important; /* Remove altura mínima no mobile */
    }
    
    .ifp-materiais-related__grid .ifp-materiais-card__image.ifp-featured-card__image {
        flex: none !important;
        height: 160px !important;
        min-height: 160px !important;
        order: -1 !important; /* Imagem aparece primeiro (acima) */
    }
    
    .ifp-materiais-related__grid .ifp-materiais-card__content.ifp-featured-card__content {
        flex: none !important;
        order: 1 !important; /* Conteúdo aparece após a imagem */
    }
    
    .ifp-materiais-related {
        padding: var(--ifp-spacing-lg, 1.5rem) !important;
    }
    
    .ifp-materiais-related__title {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .ifp-materiais-hero__title {
        font-size: 1.5rem !important; /* 24px */
    }
    
    .ifp-materiais-social-buttons {
        flex-wrap: wrap !important;
        gap: 12px !important; /* Gap menor no mobile como na single original */
    }
    
    .ifp-materiais-social-buttons .ifp-sidebar-left__social-icon {
        width: 36px !important; /* Ligeiramente menor no mobile */
        height: 36px !important;
    }
    
    .ifp-materiais-social-buttons .ifp-sidebar-left__social-icon img {
        width: 18px !important; /* Ícones menores no mobile */
        height: 18px !important;
    }
    
    .ifp-materiais-content-column--left,
    .ifp-materiais-content-column--right {
        padding: var(--ifp-spacing-md, 1rem) !important;
    }
    
    .ifp-materiais-related {
        padding: var(--ifp-spacing-md, 1rem) !important;
    }
    
    .ifp-materiais-comments-section .ifp-comments-section {
        padding: var(--ifp-spacing-md, 1rem) !important;
    }
    
    .ifp-materiais-related__title {
        font-size: 1.25rem !important;
    }
}

/* ===============================================
   Template Interativo Simplificado
   Mensagens de erro apenas (shortcodes renderizados diretamente)
   =============================================== */

/* Estilos para mensagens de erro */
.ifp-material-interactive-error {
    background: #FFF3CD;
    border: 1px solid #FFEAA7;
    border-radius: 8px;
    padding: var(--ifp-spacing-md, 1rem);
    text-align: center;
}

.ifp-material-interactive-error .ifp-error-message {
    color: #856404;
    margin: 0;
    font-size: 0.9rem;
}

.ifp-material-interactive-error .ifp-error-message code {
    background: rgba(133, 100, 4, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
}

/* ===============================================
   RESPONSIVIDADE DE CONTEÚDO - Materiais
   Força TODOS os elementos a serem responsivos
   Baseado na solução testada do single.php
   =============================================== */

/* Força TODAS as imagens a serem responsivas - 
   mesmo quando WP Rocket adiciona dimensões fixas */
.ifp-materiais-content img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    box-sizing: border-box !important;
}

/* Remove margens padrão do browser para figures */
.ifp-materiais-content figure {
    margin: 1.5rem 0 !important;
    padding: 0 !important;
}

/* Iframes específicos para vídeos YouTube - mantém proporção 16:9 */
.ifp-materiais-content iframe[src*="youtube.com"],
.ifp-materiais-content iframe[src*="youtu.be"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Outros iframes (não YouTube) - responsivos em largura apenas */
.ifp-materiais-content iframe:not([src*="youtube.com"]):not([src*="youtu.be"]) {
    max-width: 100% !important;
    width: 100% !important;
    /* NÃO forçar height: auto - preserva proporções originais */
    box-sizing: border-box !important;
}

/* ESPECÍFICO para WP Rocket YouTube Player - preserva sistema nativo */
.ifp-materiais-content .rll-youtube-player {
    max-width: 100% !important;
    width: 100% !important;
    /* NÃO sobrescrever height, position ou padding-bottom do WP Rocket */
    box-sizing: border-box !important;
    /* Força exibição dos placeholders */
    position: relative !important;
    padding-bottom: 56.23% !important; /* Proporção 16:9 */
    height: 0 !important;
    overflow: hidden !important;
    display: block !important;
    visibility: visible !important;
}

/* Garante que imagens de thumbnail dos vídeos sejam responsivas */
.ifp-materiais-content .rll-youtube-player img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    margin: auto !important;
    display: block !important;
    visibility: visible !important;
}

/* Botão de play dos vídeos - sem URL fixa */
.ifp-materiais-content .rll-youtube-player .play {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
    background-color: transparent !important;
    border: none !important;
}

/* Outros elementos embed */
.ifp-materiais-content embed,
.ifp-materiais-content object,
.ifp-materiais-content video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* Containers de embed - consolidado e simplificado */
.ifp-materiais-content .wp-block-embed,
.ifp-materiais-content .wp-embed-responsive,
.ifp-materiais-content figure.wp-block-embed {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 1.5rem auto !important;
    padding: 0 !important;
}

/* Wrapper específico para vídeos embed */
.ifp-materiais-content .wp-block-embed__wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Garante que tabelas também sejam responsivas */
.ifp-materiais-content table {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
}

/* Força elementos de largura fixa a serem responsivos */
.ifp-materiais-content [width],
.ifp-materiais-content [style*="width"] {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
}