/* ==========================================================
   HUÁNUCO REGIÓN — MICROSITIO LEGAL
   Archivo: responsive.css
   Ruta: /legales/assets/css/responsive.css
   Versión: 1.0
   ========================================================== */

/* ==========================================================
   DESKTOP GRANDE
   ========================================================== */

@media (min-width: 1600px) {

    .tr-container {
        max-width: 1360px;
    }
}

/* ==========================================================
   LAPTOP
   ========================================================== */

@media (max-width: 1200px) {

    .tr-container {
        width: min( calc(100% - 3rem), 1100px );
    }
}

/* ==========================================================
   TABLET HORIZONTAL
   ========================================================== */

@media (max-width: 992px) {

    .tr-layout {
        grid-template-columns: 1fr;
    }

    .tr-layout__sidebar {
        order: -1;
    }

    .tr-layout__sidebar--sticky {
        position: relative;
        top: auto;
    }

    .tr-site-footer__inner {
        grid-template-columns: 1fr;
    }

    .tr-site-footer__links {
        justify-content: flex-start;
    }

    .tr-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .tr-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .tr-data-grid {
        grid-template-columns: 1fr;
    }

    .tr-legal-contact {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   TABLET VERTICAL
   ========================================================== */

@media (max-width: 768px) {

    :root {
        --tr-header-height: 64px;
    }

    .tr-container {
        width: min( calc(100% - 2rem), 100% );
    }

    .tr-section {
        padding-block: var(--tr-space-10);
    }

    .tr-hero {
        padding-top: var(--tr-space-12);
        padding-bottom: var(--tr-space-14);
    }

    .tr-hero__title {
        font-size: clamp( 2rem, 8vw, 3rem );
    }

    .tr-hero__description {
        font-size: 1rem;
    }

    .tr-document-shell {
        margin-top: -2rem;
    }

    .tr-card--document {
        padding: var(--tr-space-6);
    }

    .tr-document__actions {
        display: grid;
    }

        .tr-document__actions .tr-button {
            width: 100%;
        }

    .tr-grid--2,
    .tr-grid--3,
    .tr-grid--4 {
        grid-template-columns: 1fr;
    }

    .tr-nav {
        display: none;
    }

    .tr-nav-toggle {
        display: grid;
    }

    .tr-page-header__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .tr-card-grid {
        grid-template-columns: 1fr;
    }

    .tr-toc__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================
   MÓVILES
   ========================================================== */

@media (max-width: 576px) {

    .tr-container {
        width: calc(100% - 1.25rem);
    }

    .tr-hero {
        padding-top: var(--tr-space-10);
        padding-bottom: var(--tr-space-12);
    }

    .tr-hero__title {
        line-height: 1.08;
    }

    .tr-card--document {
        padding: var(--tr-space-5);
    }

    .tr-card__body,
    .tr-card__header,
    .tr-card__footer {
        padding: var(--tr-space-4);
    }

    .tr-section-title {
        font-size: 1.5rem;
    }

    .tr-document__section + .tr-document__section {
        margin-top: var(--tr-space-8);
        padding-top: var(--tr-space-8);
    }

    .tr-toc__list {
        grid-template-columns: 1fr;
    }

    .tr-meta {
        width: 100%;
        justify-content: center;
    }

    .tr-site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .tr-back-top {
        right: 14px;
        bottom: 14px;
    }

    .tr-error-page__actions {
        display: grid;
    }

        .tr-error-page__actions .tr-button {
            width: 100%;
        }
}

/* ==========================================================
   MÓVILES PEQUEÑOS
   ========================================================== */

@media (max-width: 400px) {

    .tr-brand__subtitle {
        display: none;
    }

    .tr-eyebrow {
        font-size: .68rem;
    }

    .tr-meta {
        font-size: .75rem;
    }

    .tr-card--document {
        padding: var(--tr-space-4);
    }

    .tr-button {
        width: 100%;
    }

    .tr-cluster {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ==========================================================
   IMPRESIÓN
   ========================================================== */

@media print {

    html,
    body {
        background: white !important;
    }

    .tr-site-header,
    .tr-site-footer,
    .tr-layout__sidebar,
    .tr-back-top,
    .tr-document__actions,
    .tr-nav,
    .tr-nav-toggle {
        display: none !important;
    }

    .tr-page {
        background: white;
    }

    .tr-container {
        width: 100%;
        max-width: 100%;
    }

    .tr-layout {
        display: block;
    }

    .tr-document-shell {
        margin-top: 0;
    }

    .tr-card,
    .tr-card--document {
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .tr-document__section {
        break-inside: avoid-page;
    }

    a {
        color: black;
        text-decoration: none;
    }
}