/* ============================================
   INTEGRITY & GOVERNANCE SECTION
============================================ */
.integrity-section {
  padding: 4rem 5%;
  max-width: 1360px;
  margin: 0 auto;
}

.integrity-header {
  display: flex;
  flex-direction: column; /* Pinagpapatong ang logo (itaas) at text (ibaba) */
  align-items: center;    /* Pinapagitna ang logo at text block horizontally */
  text-align: center;     /* Pinapagitna ang bawat linya ng text */
  padding: 4rem 5%;
  gap: 2rem;              /* Spacing sa pagitan ng logo at ng title */
}

.main-video-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.5rem;   /* Dinagdagan ang gap para sa better breathing room */
  padding: 0 5%
}

.main-video {
  /* RESPONSIVE WIDTH LOGIC */
  /* Sa mobile, mas malapad ang ratio (90%). Sa desktop, limit sa 500px */
  width: 100%; 
  max-width: 300px; 
  width: clamp(250px, 60%, 300px); 
  
  height: auto;
  object-fit: cover;
  display: block;
  
}
/* Siguraduhin na ang text sa ibaba ay susunod sa centering */
.header-text {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.header-text h1 {
  font-size: clamp(2rem, 2.3vw, 3rem); /* Mas malaking font dahil centered column na */
  margin-top: 0;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  color: #1e1e1e;
  text-align: center;     /* Justify in center */
}

.header-text h1 span {
  color: #D5481B; 
}

.header-text p {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: #555;
  line-height: 1.8;
  text-align: center;     /* Justify in center */
  margin: 0 auto;         /* Centering logic para sa paragraph block */
  max-width: 750px;       /* Mas madaling basahin ang centered text kung siksik */
}
.integrity-grid {
    display: grid;
    grid-template-columns: 1fr; /* Isang column lang */
    gap: 2.5rem;
    max-width: 850px; /* Limitadong lapad para hindi "stretched" ang cards */
    margin: 0 auto; 
}
.policy-card {
  display: flex; /* Pinagtatabi ang icon at list */
  align-items: flex-start;
  gap: 2rem;
  background: #fff;
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-left: 8px solid currentColor; /* Inilipat sa kaliwa ang border para mas maganda sa list view */
  border-top: none; 
}

/* Pinalaki ang bilog na container ng icon */
.icon-container {
    width: 100px; 
    height: 100px; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem; /* Dinagdagan ang space sa ilalim */
}

/* Pinalaki ang mismong logo/icon image */
.icon-container img {
    max-width: 100px; /* Mula 35px, ginawang 60px */
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Konting effect kapag tinapatan ang card */
.policy-card:hover .icon-container img {
    transform: scale(1.15); /* Lalaki lalo ang icon kapag nag-hover sa card */
}

.policy-card ul {
  padding-left: 1.5rem;
  margin: 0;
}

.policy-card li {
  margin-bottom: 1rem;
  line-height: 1.6;
  font-size: 0.95rem;
  font-weight: 500;
}

.policy-card li:last-child {
  margin-bottom: 0;
}

.highlight {
  font-weight: bold;
}


/* Container para sa extra cards */
.hidden-content {
    max-height: 0; /* Simula ay nakasara */
    overflow: hidden; /* Itatago ang lumalampas na cards */
    opacity: 0; /* Translucent sa simula */
    display: flex; /* Panatilihing naka-flex para sa cards layout */
    flex-direction: column;
    gap: 2.5rem;
    
    /* Dito ang magic: Smooth transition para sa height at labo */
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.4s ease, 
                margin-top 0.4s ease;
}

/* Kapag active (See More) */
.hidden-content.show {
    max-height: 2000px; /* Bigyan ng sapat na space para sa lahat ng cards */
    opacity: 1;
    margin-top: 2.5rem; /* Space mula sa unang card kapag nakabukas */
}

/* Optional: Fade-in animation para sa bawat card sa loob */
.hidden-content.show .policy-card {
    animation: slideInUp 0.5s ease forwards;
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.btn-container {
    text-align: center;
    margin-top: 3rem;
}

/* Gamitin yung style ng button mo kanina */
.btn-view-more {
    padding: 0.8rem 2.5rem;
    color: #fff;
    background-color: #D5481B;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.btn-view-more:hover {
    background-color: #1e1e1e;
}

/* ============================================
   FOOTER 
============================================ */
.footer { background-color: #31353c; color: #fff; padding: 4rem 5% 0; }
.footer-container { max-width: 1360px; margin: 0 auto; display: flex; gap: 3rem; flex-wrap: wrap; padding-bottom: 3rem; }
.footer-column { flex: 1; min-width: 250px; }
.footer-column h3 { color: #D5481B; margin-bottom: 1.5rem; font-size: 1.3rem; }
.footer-column ul { list-style: none; padding: 0; margin: 0; }
.footer-column ul li { margin-bottom: 0.8rem; }
.footer-column a { color: #ddd; text-decoration: none; transition: 0.3s ease; }
.footer-column a:hover { color: #D5481B; }
.map-container { border-radius: 8px; overflow: hidden; margin-bottom: 1rem; }
.footer-bottom { background-color: #D5481B; text-align: center; padding: 1.5rem; margin: 0 -5.5%; }


/* ============================================
   RESPONSIVE DESIGN (TABLETS & MOBILE)
============================================ */

/* TABLET (Max-width 1024px) */
@media (max-width: 1024px) {
  .subbar-links { gap: 1rem; }
  
  .integrity-header {
    flex-direction: column;
    text-align: center;
  }
  
  .header-text p {
    margin: 0 auto;
  }
}

/* MOBILE (Max-width 768px) */
@media (max-width: 768px) {
  /* Hide Desktop Nav, Show Hamburger */
  .subbar-links, .search-box { display: none; }
  .hamburger-icon-button { display: flex; }
  
  /* Topbar stacking */
  .topbar { flex-direction: column; gap: 0.5rem; padding: 1rem 5%; text-align: center; }
  
  /* Hamburger Animation */
  .hamburger-icon-button.open .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburger-icon-button.open .bar:nth-child(2) { opacity: 0; }
  .hamburger-icon-button.open .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Mobile spacing */
  .integrity-section { padding: 3rem 5%; }
  
  .integrity-grid {
    grid-template-columns: 1fr; /* 1 column on mobile */
  }
}

/* Responsive: Kapag sobrang liit ng screen (Mobile), ibalik sa vertical stack */
@media (max-width: 600px) {
  .policy-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }
  
  .policy-card ul {
    text-align: left; /* Mananatiling readable ang list text */
  }
}

/* Mobile Devices (600px and below) */
@media (max-width: 600px) {
  .main-video {
    width: 90%;            /* Halos sakop ang width para malinaw ang video */
    margin-bottom: 1.5rem;
    border-radius: 12px;   /* Medyo liitan ang kanto sa maliit na screen */
  }
}

/* Tablets (601px to 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
  .main-video {
    width: 70%;
  }
}

/* Desktop/Large Screens (1025px and up) */
@media (min-width: 1025px) {
  .main-video {
    max-width: 300px;
  }
}