/* #*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#* home-page.css *#*#*#*#*#*#*#*#*#*#*#*#*#*#* (C) 2025 DekTec */
/*                                                                                                          */
/* Home-Page Styles for DekTec Website v2                                                                   */
/*                                                                                                          */
/* This file contains **page-specific** rules for the landing page only, such as:                           */
/*  - Hero gradient and responsive flex tweaks                                                              */
/*  - Quote block typography and layout                                                                     */
/*  - News grid, cards, and read-more links                                                                 */
/*  - Tradeshow subtitle sizing                                                                             */
/*  - Footer layout and link states                                                                         */
/*                                                                                                          */
/* Global, reusable styles live in `base-styles.css`. Update with care—changes here affect the home page    */
/* exclusively and should not leak to other sections of the site.                                           */
/*                                                                                                          */
/* =+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+ */

/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Hero Section -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- */

.hero {--gradient-angle:105deg; --gradient-center-x:50%; --gradient-center-y:50%;
       background:conic-gradient(
                  from var(--gradient-angle) at var(--gradient-center-x) var(--gradient-center-y),
                  #43A0FF -70deg, var(--color-dark-blue) 85deg, 
                  #030D1A 145deg, var(--color-dark-blue) 200deg, 
                  #43A0FF 290deg, var(--color-dark-blue) 445deg); transition:background 0.3s ease}
.hero .panel {color:white}

@media (min-width:860px) {.hero {height:auto; background-size:cover}}

/* Mobile portrait & landscape                                                                              */
/* The hero and new-arrivals sections stretch the full viewport height. The panel turns into a              */
/* column-flex box so the top bar keeps its own height and the carousel / arrivals list fills the rest.     */
@media (max-width:859.98px) 
{
  :is(.hero, .new-arrivals) .panel {display:flex; flex-direction:column}
}

/* .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Quotes -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */

.quote {background:linear-gradient(to top right, #62D3D7, #C0FBFD)}
.quote p {font-size:1.7rem; font-style:italic; font-weight:500; line-height:170%}
.quote .author {margin-top:2rem; font-size:1.25rem; font-style:italic; font-weight:600}

@media (max-width:859.98px) 
{
  .quote p {font-size:clamp(0.9rem, calc(0.64rem + 1.6vw), 1.6rem)} /* 16px to 24px as viewport grows from 360px to 860px */
  .quote .author {margin-top:5vw; font-size:clamp(0.6rem, calc(0.39rem + 1.6vw), 1.4rem)} /* 12px to 20px as viewport grows from 360px to 860px */
}

/* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- News -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- */

.news .row {margin-top:3.75rem; display:flex; flex-wrap:wrap; gap:7.5rem}
.news .box {min-width:300px; flex:1}

.news .date {margin-bottom:0.6rem; font-size:1.1rem; font-weight:300}
.news .figure {height:auto; margin:2rem auto; text-align:center}
.news .figure img {max-width:100%; height:auto; margin:0 auto}
.news .read-more {margin-top:1rem; font-size:1.3rem; display:inline-block}
.news .text {line-height:1.5}
.news .title {margin-bottom:1rem; font-size:1.8rem; font-weight:600}

@media (max-width:859.98px)
{
  .news .row {margin-top:2rem; gap:3rem}
  .news .date {margin-bottom:0.3rem; font-size:clamp(0.6rem, calc(0.66rem + 0.4vw), 1rem)} /* 12px to 14px as viewport grows from 360px to 860px */
  .news .figure {margin:1rem auto}
  .news .read-more {font-size:clamp(0.7rem, calc(0.7rem + 0.8vw), 1.3rem)}  /* 14px to 18px as viewport grows from 360px to 860px */
  .news .text {font-size:clamp(0.9rem, calc(0.82rem + 0.8vw), 1.4rem)}      /* 16px to 20px as viewport grows from 360px to 860px */
  .news .title {font-size:clamp(1.1rem, calc(1.16rem + 0.4vw), 1.5rem)}     /* 20px to 22px as viewport grows from 360px to 860px */

  .news .large-box .figure {margin-top:3rem}
}
@media (min-width:860px)
{
  .news .text {font-size:1.4rem; line-height:1.6}
  .news .large-box .title {font-size:2.2rem; margin-bottom:1.875rem}
  .news .large-box .figure {max-width:70%; margin:4rem auto 2rem auto}
}

/* .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Tradeshows -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */

.tradeshows .sub-title {font-size:1.6rem}

@media (max-width:859.98px)
{
  .tradeshows .sub-title {font-size:clamp(0.9rem, calc(0.82rem + 0.8vw), 1.4rem)} /* 16px to 20px as viewport grows from 360px to 860px */
}

/* .-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- Footer -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-. */

.footer {background:var(--color-dark-blue); color:white}
.footer .logo {width:10rem}
.footer-columns {margin-top:4rem; padding-right:5rem; 
                 display:flex; justify-content:space-between; flex-wrap:wrap; gap:2.5rem}
.footer-column {flex:1}
.footer-column h2 {margin-bottom:1.4rem; padding-bottom:0.4rem; position:relative; 
                   font-size:2rem; font-weight:500}
.footer-column h2::after {width:15rem; height:0.1rem; position:absolute; left:0; bottom:0;
                          content:""; background-color:rgba(255, 255, 255, 0.4)}
.footer-column ul {list-style:none}
.footer-column li {margin:1rem 0; font-size:1.4rem; font-weight:500}
.footer-column a {color:white; text-decoration:none; transition:color 0.3s}
.footer-column a:visited {color:white; text-decoration:none}
.footer-column a:hover {color:#0078D7}
.footer-copyright {margin-top:5rem; font-size:1.2rem; font-weight:300; text-align:center}

@media (max-width:859.98px)
{
  .footer .logo {width:6rem}
  .footer-columns {padding-right:0; gap:1rem} 
  .footer-column {min-width:8rem}
  .footer-column h2 {font-size:1.2rem}
  .footer-column h2::after {width:8rem}
  .footer-column li {font-size:0.9rem}
  .footer-copyright {font-size:0.8rem}
}