/* ========================================
   PAGE-BLOCK.CSS
   Styles for page block component
======================================== */

/* ----------------------------------------
   MAIN CONTAINER
---------------------------------------- */
.container {
    max-width: var(--content-width);
    margin: var(--spacing-lg) auto;
    background: var(--color-primary-light);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(139, 69, 19, 0.3);
}

/* ----------------------------------------
   CONTAINER HEADER
---------------------------------------- */
.container-header {
    background: var(--color-primary-dark);
    padding: var(--spacing-lg);
    text-align: center;
    border-bottom: var(--radius-sm) solid #8B4513;
    border-radius: var(--spacing-md) var(--spacing-md) 0 0;
}

.container-header h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.container-header p {
    opacity: 0.9;
    font-size: 1.1rem;
    font-style: italic;
}

/* ----------------------------------------
  RESPONSIVE DESIGN
---------------------------------------- */

/* Large tablets and medium screens */
@media (max-width: 1024px) {
   .container {
       margin: calc(var(--spacing-lg) * 0.8) auto;
       border-radius: calc(var(--radius-lg) * 0.9);
       box-shadow: 0 15px 30px rgba(0, 0, 0, 0.18);
       border-width: 1.5px;
   }
   
   .container-header {
       padding: calc(var(--spacing-lg) * 0.9);
       border-radius: calc(var(--spacing-md) * 0.9) calc(var(--spacing-md) * 0.9) 0 0;
   }
   
   .container-header h1 {
       font-size: 2.2rem;
       margin-bottom: 8px;
   }
   
   .container-header p {
       font-size: 1.05rem;
   }
}

/* Tablets */
@media (max-width: 768px) {
   .container {
       margin: calc(var(--spacing-lg) * 0.6) auto;
       border-radius: var(--radius-md);
       box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
       border-width: 1px;
   }
   
   .container-header {
       padding: calc(var(--spacing-lg) * 0.7);
       border-radius: var(--spacing-sm) var(--spacing-sm) 0 0;
   }
   
   .container-header h1 {
       font-size: 2rem;
       margin-bottom: 6px;
       line-height: 1.2;
   }
   
   .container-header p {
       font-size: 1rem;
       line-height: 1.4;
   }
}

/* Small tablets and large phones */
@media (max-width: 600px) {
   .container {
       margin: calc(var(--spacing-lg) * 0.5) auto;
       border-radius: var(--radius-sm);
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
   }
   
   .container-header {
       padding: calc(var(--spacing-lg) * 0.6);
       border-radius: calc(var(--spacing-sm) * 0.8) calc(var(--spacing-sm) * 0.8) 0 0;
   }
   
   .container-header h1 {
       font-size: 1.8rem;
       margin-bottom: 5px;
       line-height: 1.1;
   }
   
   .container-header p {
       font-size: 0.95rem;
       line-height: 1.3;
   }
}

/* Mobile phones */
@media (max-width: 480px) {
   .container {
       margin: calc(var(--spacing-lg) * 0.4) auto;
       border-radius: calc(var(--radius-sm) * 0.8);
       box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
   }
   
   .container-header {
       padding: calc(var(--spacing-lg) * 0.5);
       border-radius: calc(var(--spacing-sm) * 0.6) calc(var(--spacing-sm) * 0.6) 0 0;
   }
   
   .container-header h1 {
       font-size: 1.6rem;
       margin-bottom: 4px;
       line-height: 1.0;
   }
   
   .container-header p {
       font-size: 0.9rem;
       line-height: 1.2;
   }
}

/* Very small screens */
@media (max-width: 320px) {
   .container {
       margin: calc(var(--spacing-lg) * 0.3) auto;
       border-radius: calc(var(--radius-sm) * 0.6);
       box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
   }
   
   .container-header {
       padding: calc(var(--spacing-lg) * 0.4);
       border-radius: calc(var(--spacing-sm) * 0.4) calc(var(--spacing-sm) * 0.4) 0 0;
   }
   
   .container-header h1 {
       font-size: 1.4rem;
       margin-bottom: 3px;
   }
   
   .container-header p {
       font-size: 0.85rem;
       line-height: 1.1;
   }
}