/**
 * @file
 * Responsive styles for gaiovaigaio theme.
 *
 * Breakpoints:
 * - Mobile: up to 767px
 * - Tablet: 768px to 991px
 * - Desktop: 992px and above
 */


/* ===================================
   LARGE DESKTOP (min-width: 2025px)
   =================================== */

@media (max-width: 2025px) {

    .info-section{
        padding-inline: 20rem;
    }

    .card {
        width: 400px;
        height: 350px;
    }
}

@media (max-width: 1900px) {
    
    .hero-info .col-md-6 {
        padding: 3rem;
    }
}

@media (max-width: 1750px) {

    .info-section{
        padding-inline: 10rem;
    }

    .card {
        width: 350px;
        height: 350px;
    }

    .hero-info .col-md-6 {
        padding: 2rem;
    }
}

@media(max-width:1500px){

    .hero-main .short-desc {
        padding-inline: 40px;
    }

}

@media (max-width: 1200px){

    .tip-section {
        width: 80%;
    }

    .info-section{
        padding-inline: 5rem;
    }

    div#footer-form-section {
        padding-inline: 5rem;
    }
    
    .col.layout-region-node-footer {
        margin-left: 100px;
    }
}

@media (max-width: 1200px){

    .card-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .hero-main .short-desc {
        padding-inline: 20px;
    }

    h2 {
        font-size: 50px;
    }

}

/* ===================================
   TABLET AND BELOW (max-width: 991px)
   =================================== */

@media (max-width: 991px) {

    /* Typography adjustments */
    h1 {
        font-size: 48px;
    }

    h2 {
        font-size: 40px;
    }

    h3 {
        font-size: 32px;
    }

    h4 {
        font-size: 24px;
    }

    p {
        margin-block: 20px;
    }

    /* Main container */
    #main {
        max-width: 85%;
    }

    /* Navbar */
    .navbar-brand img {
        width: 280px;
    }

    /* Hero sections padding */
    .hero-info .col-md-6 {
        padding: 4rem 2rem;
    }

    .hero-main .short-desc {
        padding-inline: 30px;
    }

    /* Cards */
    .card {
        width: 100%;
        max-width: 400px;
        height: auto;
        min-height: 280px;
        padding: 30px 20px;
        margin-bottom: 20px;
    }

    .card-wrapper {
        flex-direction: column;
        align-items: center;
    }

    /* Buttons */
    .main-button,
    .secondary-button {
        margin-bottom: 10px;
        width: 100%;
        max-width: 300px;
        text-align: center;
    }

    /* Hero info section */
    .hero-info-fullwidth {
        height: auto;
        min-height: 400px;
    }

    .hero-info-wrapper {
        height: auto;
        min-height: 400px;
    }

    /* Promo section */
    #promo-video-section {
        padding: 3rem 2rem;
    }

    .promo-texts h3,
    .hero-promotion div.promo-desc h3 {
        width: 100%;
    }

    .promo-texts img {
        width: 80%;
        margin-bottom: 2rem;
    }

    /* Video iframe */
    .promo-video div {
        height: 400px !important;
    }
}

/* ===================================
   MOBILE ONLY (max-width: 767px)
   =================================== */

@media (max-width: 767px) {

    /* Typography for mobile */
    h1 {
        font-size: 36px;
        line-height: 1.2;
    }

    h2 {
        font-size: 30px;
        line-height: 1.3;
    }

    h3 {
        font-size: 24px;
        line-height: 1.3;
    }

    h4 {
        font-size: 20px;
    }

    p {
        font-size: 16px;
        margin-block: 15px;
    }

    /* Main container */
    #main {
        /* max-width: 95%; */
        padding: 0 15px;
    }

    /* Rows spacing */
    .row {
        margin-block: 30px;
    }

    /* Navbar */
    .navbar-brand img {
        width: 200px;
    }

    #navbar-main {
        padding: 10px;
    }

    /* Hero main section */
    .hero-main .short-desc {
        padding-inline: 15px;
        margin-bottom: 20px;
    }

    /* Cards */
    .card {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 250px;
        padding: 25px 20px;
        margin-bottom: 15px;
        border-radius: 32px;
    }

    .card-wrapper {
        gap: 15px;
        margin: 0;
    }

    /* Buttons */
    .main-button,
    .secondary-button {
        width: 100%;
        max-width: 100%;
        text-align: center;
        margin-right: 0;
        margin-bottom: 15px;
        padding: 15px 20px;
        font-size: 16px;
    }

    .hero-main .row a {
        margin-right: 0;
    }

    /* Hero info section */
    .hero-info .col-md-6 {
        padding: 2rem 1rem;
    }

    .hero-info-fullwidth {
        height: auto;
        min-height: auto;
        padding: 20px 0;
    }

    .hero-info-wrapper {
        height: auto;
        min-height: auto;
    }

    .hero-info-fullwidth::before {
        background-size: cover;
        background-position: center;
    }

    /* Hero promotion section */
    .hero-promotion .row {
        flex-direction: column;
    }

    .hero-promotion div.promo-desc {
        padding: 2rem 1rem;
        order: 2;
    }

    .hero-promotion .promo-img {
        order: 1;
        margin-bottom: 2rem;
    }

    .hero-promotion .promo-img img {
        width: 100%;
        max-width: 300px;
        display: block;
        margin: 0 auto;
    }

    /* Promo video section */
    #promo-video-section {
        padding: 2rem 1.5rem;
        border-radius: 32px;
    }

    .promo-texts {
        order: 1;
        margin-bottom: 2rem;
    }

    .promo-texts img {
        width: 100%;
        max-width: 250px;
        margin-bottom: 1.5rem;
    }

    .promo-texts h2 {
        margin-bottom: 1.5rem;
    }

    .promo-video {
        order: 2;
    }

    .promo-video div {
        height: 300px !important;
    }

    /* Form groups */
    .info_group,
    .desc_group {
        flex-direction: column;
    }

    .info_group > div,
    .desc_group > div,
    .desc_group > div:nth-child(1),
    .desc_group > div:nth-child(2) {
        width: 100%;
        margin-bottom: 20px;
    }

    /* Footer */
    footer div.footer-imgs {
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    footer div.footer-imgs img {
        width: 150px;
        max-width: 80%;
    }

    /* Absolute background image */
    .absolute-background-img {
        opacity: 0.3;
        width: 100%;
    }

    /* Text containers */
    .label-container,
    .text-container {
        padding: 1rem 0;
    }

    div#footer-form-section {
        padding-inline: 3rem;
    }

    .col.layout-region-node-footer {
        margin-left: 100px;
    }
}

/* ===================================
   SMALL MOBILE (max-width: 480px)
   =================================== */

@media (max-width: 480px) {

    div#block-gaiovaigaio-formheaderblock {
        padding-inline: 3rem;
    }

    div#block-gaiovaigaio-formheaderblock img {
        margin-bottom: 20px;
    }

    div#block-gaiovaigaio-formheaderblock a {
        align-items: normal
    }

    .info-section {
        padding-inline: 2rem;
    }

    .photo-example-section.row {
        flex-direction: column;
    }

    .tip-section {
        width: 90%;
    }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 18px;
    }

    p {
        font-size: 14px;
    }

    .navbar-brand img {
        width: 160px;
    }

    .card {
        padding: 20px 15px;
        border-radius: 24px;
    }

    .hero-info .col-md-6 {
        padding: 1.5rem 0.5rem;
    }

    #promo-video-section {
        padding: 1.5rem 1rem;
        border-radius: 24px;
    }

    .promo-video div {
        height: 250px !important;
    }

    .main-button,
    .secondary-button {
        font-size: 14px;
        padding: 12px 15px;
    }
}

/* ===================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   =================================== */

@media (max-height: 600px) and (orientation: landscape) {

    .hero-info-fullwidth,
    .hero-info-wrapper {
        min-height: 300px;
    }

    .hero-info .col-md-6 {
        padding: 2rem;
    }

    #promo-video-section {
        padding: 2rem;
    }
}