/* iq-responsive.css — Fixos focalitzats de responsivitat
   Carregat després de main.min.css per overrides */

/* === SPLASH +info button (homepage carousel) === */
#splash .carousel-caption .call-to-action {
    display: block !important;
    text-align: left;
    margin-top: 10px;
}
@media (max-width: 767px) {
    #splash .carousel-caption .content { padding: 18px 15px 22px; }
    #splash .carousel-caption .title { font-size: 19px; line-height: 24px; margin-bottom: 6px; }
    #splash .carousel-caption .call-to-action .btn { padding: 10px 18px; font-size: 13px; min-height: 38px; }
}

/* === BOTONS — touch targets adequats a mòbil === */
@media (max-width: 767px) {
    .btn { padding: 10px 14px; min-height: 38px; line-height: 1.4; }
    .btn-lg { padding: 12px 18px; min-height: 44px; }
    .btn-sm { padding: 8px 12px; min-height: 32px; }
}

/* === PRODUCTES — filtre accordion en pantalles petites === */
@media (max-width: 480px) {
    .iq-cats-grid { column-count: 1 !important; column-gap: 0; }
    .iq-cat-block.open .iq-cat-items { grid-template-columns: 1fr !important; }
    .iq-cat-items { padding: 6px 0 14px 12px; }
    .iq-cat-items > li a { font-size: 14.5px; padding: 6px 0 !important; }
    .area-cat-header { font-size: 12px !important; padding: 10px 0 8px !important; }
}

/* === SECTORS — offset/featured sidebar overflow a mòbil estret === */
@media (max-width: 479px) {
    .col-xs-8.col-xs-offset-4 { margin-left: 0; width: 100%; }
    .sectorimg { max-width: 80%; margin: 0 auto; display: block; }
}

/* === DISTRIBUIDOR — assegurar stats/cards stacking neta sota 480px === */
@media (max-width: 480px) {
    .iq-distrib-stats .iq-stat { width: 100% !important; padding: 12px 0 !important; border-right: 0 !important; border-bottom: 1px solid #2a2a2a; }
    .iq-distrib-stats .iq-stat:last-child { border-bottom: 0; }
    .iq-distrib-hero h1 { font-size: 28px !important; line-height: 1.15 !important; }
    .iq-distrib-hero .iq-lead { font-size: 15px !important; }
}

/* === NOTÍCIES — cards consistents a mòbil === */
@media (max-width: 767px) {
    .news-card img, .news-thumb img { width: 100%; height: auto; max-width: 100%; }
}

/* === GENERAL — evitar overflow horitzontal === */
body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* === HEADER — login dropdown a mòbil === */
@media (max-width: 480px) {
    #header .loginwrap { padding: 16px; }
    #header .loginwrap .login-form .form-group { display: block; margin-bottom: 10px; }
    #header .loginwrap .login-form .input-group { width: 100%; margin-right: 0; }
    #header .loginwrap .login-form .btn { width: 100%; }
}

/* === CHATBOT — ja gestionat al seu propi JS, no tocar === */

/* === FOOTER — text wrapping a mòbil === */
@media (max-width: 767px) {
    #footer .nav li { display: block; padding: 4px 0; }
    #footer .row > [class*="col-"] { margin-bottom: 16px; }
}

/* === FORMS — accessibilitat a mòbil === */
@media (max-width: 480px) {
    .form-control { font-size: 16px !important; /* evita zoom automàtic a iOS */ }
}

/* === MODALS — interior scrollable a mòbil === */
@media (max-width: 767px) {
    .modal-dialog { margin: 10px; width: auto; }
    .modal-content { max-height: calc(100vh - 20px); overflow-y: auto; }
}

/* === TAULES — força scroll horitzontal en taules amples === */
@media (max-width: 767px) {
    table:not(.no-responsive) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* === GLOSSARY AUTO-LINKS (subtle dotted underline) === */
.iq-glossary-link {
    color: inherit;
    text-decoration: none !important;
    border-bottom: 1px dotted rgba(0, 144, 54, 0.5);
    transition: all .15s;
    cursor: help;
}
.iq-glossary-link:hover {
    color: #009036;
    border-bottom: 1px solid #009036;
    text-decoration: none !important;
}
/* Dins de blocs amb fons fosc (sector hero, etc) ajustem el color */
.sector-description .iq-glossary-link,
.sector-extra-content .iq-glossary-link {
    border-bottom-color: rgba(177, 200, 0, 0.55);
}
.sector-description .iq-glossary-link:hover,
.sector-extra-content .iq-glossary-link:hover {
    color: #b1c800;
    border-bottom-color: #b1c800;
}