/**
 * Cassiopeia HTSprout - 響應式變數覆寫
 *
 * 包含：
 * - 平板／手機 :root CSS 變數覆寫
 * - 容器 padding 調整
 * - 通用 grid-child flex 覆寫
 *
 * @package     Joomla.Site
 * @subpackage  Templates.cassiopeia_htsprout
 * @copyright   Copyright (C) 2026 HTSprout. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* ============================================
   7. 響應式斷點
   ============================================ */

/* 平板（768px - 992px） */
@media (max-width: 991.98px) {
  :root {
    --htsprout-container-max-width: 960px;
    --htsprout-spacing-lg: 32px;
    --htsprout-spacing-xl: 64px;
  }
}

/* 手機（< 768px） */
@media (max-width: 768px) {
  :root {
    --htsprout-container-max-width: 100%;
    --htsprout-spacing-lg: 24px;
    --htsprout-spacing-xl: 48px;
  }

  .container,
  .container-xxl {
    padding-left: var(--htsprout-spacing-sm);
    padding-right: var(--htsprout-spacing-sm);
  }
}

/* 平板版 grid-child flex 覆寫 */
@media (max-width: 991.98px) {
  .container-top-a > .grid-child,
  .container-top-b > .grid-child,
  .container-top-c > .grid-child,
  .container-bottom-a > .grid-child,
  .container-bottom-b > .grid-child,
  .container-bottom-c > .grid-child {
    flex-direction: column;
  }
  .container-top-a > .grid-child > *,
  .container-top-b > .grid-child > *,
  .container-top-c > .grid-child > *,
  .container-bottom-a > .grid-child > *,
  .container-bottom-b > .grid-child > *,
  .container-bottom-c > .grid-child > * {
    flex: 0 auto;
  }
}